如何使用jquery-ajax提交表单数据？

Question

I'm not sure why I'm not getting it. Either way this is frustrating me beyond belief. I've looked through 2 jquery books, web tutorials, and stack overflow posts and i still dont understand.

I am trying to build a search filter bar where a user can select filters and upon clicking "refine result" it modifies the query output.

How do I submit the value of whichever form radio box the user selects using jquery/ajax to a php page which will display results dependent upon the input, without page refresh.

1. Form-->
2. user selects radio button value and clicks submit-->
3. form data gets sent via jquery/ajax to the .php page whose output is to be displayed in without page refresh-->
4. .php file processes the user input and creates output based on it

I've honestly looked through alot of different answers but all of them assume that the reader has a greater basic knowledge of javascript/jquery than I do.

Like, do I have to put the jQuery/ajax in a function that runs "onclick" of my submit button? Or do I just add a .click event handler for my button id?

Can someone explain it all to me assuming I'm a complete jQuery/ajax noob?

Answer 1

You just have to attach your ajax call to the "submit" event that comes from the form when the submit button is clicked :

$('form').submit(function(e){
    e.preventDefault();
    $('.content').load(this.action+" .content", $(this).serialize(), function(){
        // code to execute after result display if needed
    });
    return false;
});

I assumed your results are displayed in an element that has the "content" class.

1. $('form') selects your form, you can personalize it
2. .submit attach an event handler to the form "submit event
3. e.preventDefault() and return false prevents the form to be actually submitted
4. $('.content').load will fill the element with "content" class with the ajax call results
5. this.action is the URL to submit the form to
6. " +.content" is here to extract only the result part from the response, instead of the entire html page
7. $(this).serialize() passes the form fields data to the ajax request
8. finally the last anonymous function is called after the results are displayed and can be used to trigger some visual effect indicating that the results were updated