Question

我有一个表单，可以将购物车信息提交给处理程序文件，该文件非常有效。我现在正在尝试合并ajax和jquery以提供更好的用户体验。

我的问题是代码仅适用于第一次提交。

这是我的js代码：

$(function(){
    $('form.addtoCart').on('submit', function() {
        var that = $(this),
            url = '/ajax/handlerCart.php',
            type = that.attr('method'),
            data = {};

        that.find('[name]').each(function(index, value) {
            var that = $(this),
                name = that.attr('name'),
                value = that.val();

            data[name] = value; 
        });

        $.ajax({
            url: url,
            type: type,
            data: data,
            success: function(response) {
                console.log(response);
                $('#nav_cart').load('/ajax/nav_cart.php');
            }
        });
        return false;
    });
});

这是我的HTML：

<form action="" method="post" class="addtoCart">
    <input type="hidden" name="ID" value="1">
    <input type="hidden" name="Price" value="5">
    <input type="submit" value="Add" name="Add">
</form>

我已经完成的事情：

1）我尝试过查看Chrome控制台，看起来每次点击后脚本都在运行。第一个回应是＆＃34;工作＆＃34;然后我点击后面的7次，如下图所示。

chrome console

2）我不认为这是一个事件委派问题，因为我的html中没有添加新的后代。

3）我认为有一个问题load（）只能工作一次，所以我也尝试删除以下代码行：

$('#nav_cart').load('/ajax/nav_cart.php');

问题仍然存在。

4）我已经尝试让处理程序返回echo time（）。我想也许浏览器阻止了重复的javascript响应，但是没有用。

我已经尽力研究这个问题，但我无法找到解决方案，或者我只是不了解人们向他人提供的解决方案。我提前道歉，我对jquery / ajax还很新。

感谢您的时间。

编辑：

我的表单位于index.php中。一旦ajax成功，nav_cart.php就被加载到div＃nav_cart（也在index.php中）。对不起，如果不清楚的话。

Answer 1

您是否尝试过添加preventDefault（）方法来阻止默认的submision？

 $(function(){
    $('form.addtoCart').on('submit', function(e) { //addede e here to get the event object
        e.preventDefault(); // preventing the default submit
        var that = $(this),
            url = '/ajax/handlerCart.php',
            type = that.attr('method'),
            data = {};

        that.find('[name]').each(function(index, value) {
            var that = $(this),
                name = that.attr('name'),
                value = that.val();

            data[name] = value; 
        });

        $.ajax({
            url: url,
            type: type,
            data: data,
            success: function(response) {
                console.log(response);
                $('#nav_cart').load('/ajax/nav_cart.php');
            }
        });
        return false;
    });
});

Answer 2

$(function(){
    $('form.addtoCart').on('submit', function() {
        var that = $(this),
            url = '/ajax/handlerCart.php',
            type = that.attr('method'),
            data = {};

        that.find('[name]').each(function(index, value) {
            var that = $(this),
                name = that.attr('name'),
                value = that.val();

            data[name] = value; 
        });

        $.ajax({
            url: url,
            type: type,
            data: data,
            success: function(response) {
                console.log(response);
                $('#nav_cart').load('/ajax/nav_cart.php');
            }
        });
        return false;
    });
});

在/ajax/nav_cart.php上添加此项而不是在HTML上引用它

Answer 3

jQuery代码正在运行，您可以从控制台中看到。它注册了回应。只有那个回复是空的。问题必须存在于/ajax/handlerCart.php以及它如何响应请求。

Answer 4

在这里，您需要使用jQuery实现事件委派。因为当您加载页面时，会创建DOM并将事件分配给表单。

但是在你发出ajax请求之后，你正在根据你的AJAX响应替换HTML。您也正在替换表单元素。

虽然它是相同的标记，但是从DOM的角度来看，它的新元素和事件被分配给具有相同标记的旧元素。

您应该将事件绑定到某个未被AJAX调用替换的父元素，如下所示：

$('#parent_element').on('submit', '.addtoCart', function(event){
  // Your code here
});

更多信息：http://www.xpertdeveloper.com/2011/12/event-delegation-in-jquery/

Answer 5

不要使用Submit和form，您可以通过简单的按钮直接在html中替换它：

<input type="button" value="Add" name="Add" class="mybutton">

然后使用ajax：

 $(".mybutton").on("click",function(){

    $.ajax({
        url: url,
        type: type,
        data: data,
        success: function(response) {
            console.log(response);
            $('#nav_cart').load('/ajax/nav_cart.php');
        }
    });


  })

php ajax jquery - 提交只能工作一次

5 个答案: