Question

我使用jQuery插件“Star Rating”实施了星级评分系统。我使用PHP动态制作表单，MySQL使用PHP将数据上传到我的数据库。我已经尝试过转换为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

您在jQuery中发布的内容与AJAX无关。要获得AJAX POST请求，请查看http://api.jquery.com/jQuery.ajax/处的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()即可。

希望这有帮助，

詹姆斯

---------编辑---------

对于您要发送的数据，请尝试使用此代码。我测试过，效果很好。我假设你想要在点击类.auto-submit-star的单选按钮时运行AJAX调用。

$(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 2

尝试使用我的ALAJAX jQuery插件。它简单易行。简单如下：

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

Answer 3

您还应该删除

this.form.submit（）;

在您的jQuery代码中

以避免回调函数中的页面提交。最好只使用James demonstrated。

的原生Ajax函数

如何将jQuery表单提交转换为Ajax？

3 个答案:

---------编辑---------