Как преобразовать отправку JQuery формы в Ajax?

Question

Я внедрил систему звездного рейтинга, используя плагин jQuery «Звездный рейтинг». Я использую PHP для динамического создания форм и MySQL для загрузки данных в мою базу данных. Я уже пытался конвертировать в Ajax, и соединение открывается ( Firebug ), но данные не передаются.

Вот пример (динамически генерируемой) формы HTML:

<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>

Вот соответствующие биты rater.php:

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

А вот мой код jQuery:

$(document).ready(function () {
    $('.auto-submit-star').rating({
    callback: function(value, link){
        this.form.submit();
    }
});

Каждый раз, когда я нажимаю на звездочку, таблицы MySQL корректно обновляются, но вся страница перезагружается. Ничто из того, что я сделал для преобразования в Ajax, до сих пор не сработало - что мне делать?

Answer 1

Попробуйте использовать мой ALAJAX jQuery плагин. Это легко и просто. Так же просто, как:

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

Answer 2

То, что вы разместили в своем jQuery, не имеет ничего общего с AJAX.Чтобы запустить запрос AJAX POST, взгляните на jQuery .ajax() на http://api.jquery.com/jQuery.ajax/.. Это должно решить все проблемы.

Примером для вашего случая будет

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

(с сайта jQuery)

Если вы не хотите оставлять отзывы, просто оставьте поле success:.Также имеется поле :error для обработки ошибок, и оно работает почти так же, как :success - используйте внутри него функцию, чтобы делать вещи.

Остальная часть вызова должна быть достаточно понятной,а также документацию по ссылке, которую я дал.

И последнее: обратите внимание, что для вызовов .ajax() селектор не требуется - просто $.ajax() хорошо.

Надеюсь, этопомогает,

Джеймс

--------- РЕДАКТИРОВАТЬ ---------

Для данных, которые вы хотите отправить, попробуйте этот фрагмент кода.Я проверил, и это прекрасно работает.Я предполагаю, что вы хотите, чтобы вызов AJAX выполнялся всякий раз, когда нажимается переключатель с классом .auto-submit-star.

$(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
               }
         })
     })
});

Вы можете безопасно оставить поля :success и :error пустыми, если не хотите оставлять отзывы пользователей.Если вы действительно хотите получить обратную связь, дайте мне знать, и я внесу еще несколько правок: -)

Надеюсь, мой пример имеет какой-то смысл.Если этого не произойдет, снова дайте мне знать, и я исправлю: -)

Джеймс

Answer 3

Вы также должны удалить

this.form.submit ();

в вашем коде jQuery, чтобы избежать отправки страницы в функцию обратного вызова. Лучше просто использовать встроенную функцию Ajax, которую Джеймс продемонстрировал .