Question

它没有帮助。

如果我在表单上键入内容并单击“提交”按钮，则会发送一个请求。第二次如果我输入内容并单击它会发送两个请求。第三次它发送三个请求，依此类推。为什么是这样？我在jquery代码中有错误吗？

这是我的代码：

index.php =＆gt;

$(document).ready(function(){
    console.log('hello');
    $('input[name="nm_submit_comment"]').on('click',function(){
        var frm = $(this).closest("form")[0];
        var frm_id = $(frm).attr("id");
        var frm_id_splitted = frm_id.split("_");
        var frm_id_splitted_2 = frm_id_splitted[2];
        console.log($('div#id_div_' + frm_id_splitted_2));
        $(frm).on('submit',function(e){
            e.preventDefault();
            frm_serialized = $(this).serialize();
            console.log(frm_serialized);

            $.ajax({
                url: "save-comment.php",
                method: "POST",
                data: frm_serialized,
                success: function(data) {
                    console.log(data);
                    $('div#id_div_' + frm_id_splitted_2).append(data);
                }
            });

        });

    });

});

javascript.js =＆gt;

<?php

if (session_id() == '') {
    session_start();
}    

echo json_encode($_POST);
?>

save-comment.php =＆gt;

<!DOCTYPE html>
<html ng-app="store">
<head>
    <title>Angular Code School</title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="app.js"></script>
    I am {{4+6}}
    {{"Hello +"World"}}
<div ng-controller="StoreCtrl as store">
<div ng-repeat="product in store.products| orderBy:'-price'">
<h2>Name :{{product.name}} </h2>

    <h2>Price:{{product.price | currency}} </h2>
    <h2>Description:{{product.description}} </h2>
    <button ng-show="product.canPurchase">Add To Cart </button>

<section ng-controller="PanelCtrl as panel">
    <ul class="nav nav-pills">
        <li ng-class="{'active':panel.isSelectedTab(1)}"><a href ng-click="panel.selectTab(1)"> Description</a></li>
        <li ng-class="{'active':panel.isSelectedTab(2)}"><a href ng-click="panel.selectTab(2)">Specs</a></li>
        <li ng-class="{'active':panel.isSelectedTab(3)}"><a href ng-click="panel.selectTab(3)">Reviews</a></li>
    </ul>
    <div ng-show="panel.isSelectedTab(1)">This is description div</div>
    <div ng-show="panel.isSelectedTab(2)">This is Specification Section</div>
    <div ng-show="panel.isSelectedTab(3)">This is Reviews section</div>
</section>
</div>
</div>


</body>
</html>

Answer 1

尝试one然后on

$("#id_form_1").one('submit', function (e) {
    e.preventDefault();
    frm_serialized = $(this).serialize();
    console.log(frm_serialized);

    $.ajax({
        url: "save-comment.php",
        method: "POST",
        data: frm_serialized,
        success: function (data) {
            console.log(data);
            $('div#id_div_' + frm_id_splitted_2).append(data);
        }
    });

});

同样无需只需bind提交serialize您最近的表单并进行ajax来电。你是内部绑定事件，事件执行multiple binding。

Answer 2

您正在按钮上的submit事件代码中注册表单click的事件。因此，每次单击按钮时，它都会反复添加事件。

这应该足够好了。

$(document).ready(function(){

   $('input[name="nm_submit_comment"]').on('click',function(e){
        e.preventDefault();

        var frm = $(this).closest("form");
        var frm_id = frm.attr("id");
        var frm_id_splitted = frm_id.split("_");
        var frm_id_splitted_2 = frm_id_splitted[2];

        var frm_serialized = frm.serialize();

        $.ajax({
                url: "save-comment.php",
                method: "POST",
                data: frm_serialized,
                success: function(data) {
                    console.log(data);
                    $('div#id_div_' + frm_id_splitted_2).append(data);
                }
        });

   });

});

Answer 3

您可以尝试以下方法：

$(document).off().on("click","#submit",(function(e) {  
        e.preventDefault();
}

为什么jquery-ajax多次提交表单？

3 个答案: