php ajax jquery-在提交时只能使用一次

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控制台，每次单击后脚本似乎都能正常工作。 第一个响应显示为“有效”，随后我单击了7次，如下图所示。

镀铬控制台

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（）方法来防止默认的子裁切？

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


  })