Questions on practical usage of ajax with jquery

Question

I'd been reading up on implementing ajax with jquery.

Am I right to say, $.ajax() is the only function we ever need? ie. we don't actually need the $.get $.post functions?

Lastly, lets say we're building this ajax form, we should bind the $.ajax function to a submit button using .click? We don't actually need to enclose the button in a form tag right?

So far, I'd only seen tutorials writing the jquery code with $.ajax. But I have no idea how to implement this. Would be good if there's a guide that shows a complete jquery ajax form with the full html and jquery codes.

Answer 1

Correct $.ajax() is what the $.get and $.post uses behind the scene. Those are just helpers to make it a little more convenient. I always use $.ajax().

Also correct you do not need a form on the page to access the DOM elements with jQuery so you can read them and also write back your data from your callback without a form on the page.

I tend to make a button like

<a href="javascript:void(0)" id="partytime">Click me</a>

Then do something like the following in your document.ready

$("#partytime").click(function(){
   //put all your ajax fun in here
});

Answer 2

.post and .get are just shorthand methods that eventually call .ajax. You can check out any jquery tutorial, for example http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery It has html

Answer 3

The short answer to your question is "yes." You can do everything with $.ajax() that you could do with any of the other AJAX calls in jQuery. The rest are essentially shortcuts for performing common tasks.

Regarding your question about the button placement, you are correct in thinking that you don't need to actually place the button inside a form. In fact, if you are doing all your form submission via ajax, it isn't necessary to have a form tag at all. However, it might make your markup more readable, and it certainly make more sense heuristically.

As for a tutorial, here's one that goes through the creation of an AJAX interface from start to finish: http://visionmasterdesigns.com/tutorial-ajax-interface-menu-using-jqueryphp/

Good luck!

Answer 4

While I do not have a full example of an AJAX form to show you, I can tell you how I usually set one up.

I would generally build a normal form (with <form> tags and a <button type="submit" name="formSubmit" id="formSubmit">). Then the form works even without Javascript, see? In your jQuery:

$('#formSubmit').click(function() {
    //Do ajax stuff

    return false; // This stops the form from "actually" submitting.
}

An alternative selector would be $('#formName').submit(function). Use whichever one makes the most sense.

To answer your other question: Yes, $.get() and $.post() are merely convenience functions for $.ajax(). They are less powerful, but might improve readability of your code.

Answer 5

I often find the .load() shorthand function useful, as it allows callback functions unlike .get() or .post().

But strictly speaking .load() is just a slightly preconfigured .ajax() call, so yes, .ajax() is all you really HAVE to use.