Keeping in mind that the $.get() and $.post() methods are just
convenience wrappers for $.ajax(). You could do the same with this:
$.ajax({
url: "/test/ajax/record/",
type: "POST",
data: "test=" + $("input[name=test]").val(),
success: function (data) {
alert("Successfully saved data");
}
});
On the surface this looks like more work, but I'm finding that it's MUCH
easier to understand and customize to my needs. Then again, I know how
to do Ajax without jQuery too.... :)
I guess the lesson here is that there is always more than one way to
accomplish a task...
Shawn
Jake McGraw wrote:
> Replace // ? with:
>
> $(function(){ // 1
> $("form").submit(function(){ // 2
> var value = $(this).find("input[name=test]").val(); // 3
> $.post("/test/ajax/record/",{"test":value},function(){ // 4
> alert("Message sent successfully!"); // 5
> });
> return false; // 6
> });
> });
>
> Notes for each line:
>
> 1. $(function(){}) is short hand for $(document).ready(function(){}),
> this means your javascript won't run until the entire document is
> loaded, check out:
>
> http://docs.jquery.com/Events/ready
>
> 2. We bind a function to execute when our form is being submitted:
>
> $("form") finds all of the <form> elements on the page (there is only
> one right now)
> $("form").submit() binds a function to the submit event of the form
> (what takes place when you click the submit button), see:
>
> http://docs.jquery.com/Events/submit#fn
> <http://docs.jquery.com/Events/submit#fn>
>
> 3. When a function is bound to a select set ($("form") =>
> $("form").submit()), the "this" keyword is automatically set to the
> element we are currently with, so rather than writing $("form") again,
> we can simply refer to $(this), see:
>
> ...the 'this' keyword points to the specific DOM element...
>
> http://docs.jquery.com/Core/each
>
> 4. The $.post function has three parameters:
> a. The URL target for the post
> b. Variables to be sent to server: {"var":"value"} (Accessible in PHP
> using $_POST['var'])
> c. A callback function to be executed when the AJAX message
> successfully sends and receives a response, see:
>
> http://docs.jquery.com/Ajax/jQuery.post#urldatacallback
>
> 5. A JavaScript popup for succesful completion.
>
> 6. return false to prevent the form from actually submitting, which
> would take us away from the current page, see:
>
> http://docs.jquery.com/Events_(Guide)#event.stopPropagation.28__.29
>
> So, that, in a nutshell is how to do Ajax with jQuery without a plugin.
> There is a lot of other stuff thrown in, so definitely check out the
> resources before embarking on your AJAX trip and learn all the things
> jQuery can do.
>
> - jake
>
>
>
>
>
>
> On Dec 20, 2007 1:49 PM, jjshell <[EMAIL PROTECTED]
> <mailto:[EMAIL PROTECTED]>> wrote:
>
>
> Hello,
> I'm new to jQuery (and AJAX for that matter). Even if the library is
> really easy to use, I'm still having problems "ajaxing".
>
> I'd like to understand how to post the following simple form to the
> server, and send a message to the client depending on the submission
> process output (telling him if what he submitted is ok or not).
>
> Would someone be kind enough to guide me through the steps?
>
> Here's the HTML bit. I am going to use jQuery with the Zend Framework
> (PHP).
>
> <html>
> <head>
> <script type="text/javascript" src="jquery-1.2.1.js"></script>
> <script type="text/javascript">
>
> //?
>
> </script>
>
> </head>
> <body>
>
> <form action="/test/ajax/record/" method="post">
>
> <input type="text" name="test" value="" />
> <input type="submit" name="ajax" value="save" />
>
> </form>
>
> </body>
> </html>
>
>
