How to convert a jQuery form submission to Ajax?

I've implemented a star rating system using the jQuery plugin "Star Rating". I use PHP to dynamically make the forms, and MySQL to upload the data to my database. I've tried converting to Ajax already, and the connection opens (Firebug) but no data is passed.

Here's an example of the (dynamically generated) HTML form:

<form action="rater.php" method="post">
    <input name="star1" type="radio" class="auto-submit-star star" value="50830,1"/>
    <input name="star1" type="radio" class="auto-submit-star star" value="50830,2"/>
    <input name="star1" type="radio" class="auto-submit-star star" value="50830,3"/>
    <input name="star1" type="radio" class="auto-submit-star star" value="50830,4"/>
    <input name="star1" type="radio" class="auto-submit-star star" value="50830,5"/>
</form>

Here's the relevant bits of rater.php:

$input = $_POST["star1"];
$pieces = explode(",", $input);
$recipe = $pieces[0];
$rating = $pieces[1];
//Go on to make a bunch of MySQL queries

And here's my jQuery code:

开发者_如何学Go$(document).ready(function () {
    $('.auto-submit-star').rating({
    callback: function(value, link){
        this.form.submit();
    }
});

Every time I click a star, the MySQL tables update properly, but the entire page reloads. Nothing I have done to convert to Ajax has worked thus far-- what should I do?

What you have posted in your jQuery has nothing to do with AJAX. To get an AJAX POST request going, have a look at jQuery's .ajax() at http://api.jquery.com/jQuery.ajax/. That should sort things out.

An example for your case would be

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
 });

(from jQuery site)

If you don't want any feedback, simply leave the success: field out. There is also an :error field to process errors and it works in much the same way as :success - use a function inside it to do stuff.

The rest of the call should be fairly self explanatory, as well as the documentation on the link I gave.

One final thing is to notice that there is no selector required for .ajax() calls - simply $.ajax() is fine.

Hope this helps,

James

--------- EDIT ---------

For the data you want to send, try this piece of code. I have tested and it works great. I'm assuming you want the AJAX call run whenever a radio button with the class .auto-submit-star is clicked.

$(document).ready(function () {
    $('.auto-submit-star').click(function() {    // When the radio button is clicked...
        $.ajax({                                 // ... submit this AJAX call.
            type: "POST",                        // Method (POST or GET)
            url: "rater.php",                    // Path to your rater.php file
            data: "star1="+$(this).val(),        // The value of this radio button
            success: function(data) {            // Stuff to run on success
                 // Anything you want to happen on success.
                 // 'data' is the returned HTML from your PHP.
                 // If you don't want anything to happen, leave this blank.
               },
               error: function(data) {           // Stuff to run on error
                   // Any error handling you might want
               }
         })
     })
});

You can safely leave the :success and :error fields blank if you want no user feedback. If you do want feedback, let me know and I'll make some more edits :-)

I hope my example makes some sense. If it doesn't, again, let me know and I shall make amends :-)

James

Try to use my ALAJAX jQuery plugin. It's easy and simple. As simple as:

$('#form_ID or #div_ID').alajax();

You should also remove

this.form.submit();

in your jQuery code to avoid the page submission in the callback function. It's better to just use the native Ajax function which James demonstrated.