通过ajax POST提交两次表单

2024-05-13

插入到mysql using php通过文件调用AJAX。前insert语句php代码执行select查询到查找重复记录并继续insert statement.

Issue:从ajax调用php文件时。它执行了两次并得到作为重复记录的响应。

好吧,我试过了error_log从插入函数中调用了两次。

表单验证的触发点

$("#load-modal").on("click","#addcountryformsubmitbtn",function(e){
    e.preventDefault();
    var $form = $("#addcountryform"), $url = $form.attr('action');  
    $form.submit();
});

这是验证后提交表单的方式:

}).on('success.form.bv', function(e){
    e.preventDefault();
    var $form = $("#addcountryform"), $url = $form.attr('action'); 
    $.post($url,$form.serialize()).done(function(dte){ $("#load-modal").html(dte); });
});

使用 bootstrapvalidator、Core PHP、mysqli、Chrome 浏览器。

实际的JS:

            $(document).ready(function() {
            $php_self_country="<?php echo $_SERVER['PHP_SELF']."?pg=countrycontent"; ?>";
            $("#country-content").load($php_self_country,loadfunctions);
            $("#country-content").on( "click", ".pagination a", function (e){
                e.preventDefault();
                $("#country-loading-div").show();
                var page = $(this).attr("data-page");
                $("#country-content").load($php_self_country,{"page":page}, function(){
                    $("#country-loading-div").hide();
                    loadfunctions();
                });             
            });
            $("#country-content").on("click","#closebtn",function(e){
                e.preventDefault();
                $("#country-content").load($php_self_country,loadfunctions);
            });
        });
        function loadfunctions(){
            $("[data-toggle='tooltip']").tooltip(); 
            $("#country-content").on("click","#addcountrybtn, #addcountrylargebtn",function(e){
                e.preventDefault();
                $.ajax({
                    url: $php_self_country,
                    type: "POST",
                    data: { 'addcountry':'Y' },
                    dataType: "html",
                    cache: false
                }).done(function(msg){
                    $("#load-modal").html(msg);
                    $("#load-modal").modal('show');
                    $('input[type="radio"]').iCheck({ checkboxClass: 'icheckbox_minimal', radioClass: 'iradio_minimal' });
                    modalvalidation();
                }).fail(function() {
                    $("#load-modal").html( "Request Failed. Please Try Again Later." );
                });         
            });
            $("#country-content").on("click",".tools a",function(e){
                e.preventDefault();
                var recordid = $(this).attr("record-id");
                $.ajax({
                    url: $php_self_country,
                    type: "POST",
                    data: { 'modifycountry':recordid },
                    dataType: "html",
                    cache: false
                }).done(function(msg){
                    $("#load-modal").html(msg);
                    $("#load-modal").modal('show');
                    $('input[type="radio"]').iCheck({ checkboxClass: 'icheckbox_minimal', radioClass: 'iradio_minimal' });
                    modalvalidation();
                }).fail(function() {
                    $("#load-modal").html( "Request Failed. Please Try Again Later." );
                });
            });
            $("#load-modal").on("click","#addcountryformsubmitbtn",function(e){
                e.preventDefault();
                var $form = $("#addcountryform"), $url = $form.attr('action');  
                $form.submit();
            });
            $("#load-modal").on("hide.bs.modal", function () {
                window.location.href=$php_self_country_pg;
            });
        }
        function modalvalidation(){ 
            $('#addcountryform').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    [-------Validation part comes here----------]
                }
            }).on('success.form.bv', function(e){
                e.preventDefault();
                var $form = $("#addcountryform"), $url = $form.attr('action'); 
                $.post($url,$form.serialize()).done(function(dte){ $("#load-modal").html(dte); });
            });
        }

HTML

单击按钮时调用此 htmladdcountrybtn via AJAX并写入divload-modal它位于基本 html 文件中。

<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title"><i class="fa fa-exchange"></i> <?php echo COUNTRYLABEL; ?></h4>
    </div>      
    <div class="modal-body">
        <form role="form" method="POST" action="self.php" name="addcountryform" id="addcountryform" class="form-horizontal">
            <div class="form-group">
                <div class="col-xs-3">
                <label for="countryname" class="pull-right">Country Name</label>
                </div>
                <div class="col-xs-9">
                <div class="lnbrd">
                <input type="text" class="form-control" name="countryname" placeholder="Enter Country Name">
                </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-3">
                <label for="crncyname" class="pull-right">Currency Name</label>
                </div>
                <div class="col-xs-9">
                <div class="lnbrd">
                <input type="text" class="form-control" name="crncyname" placeholder="Enter Currency Name">
                </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-3">
                <label for="crncycode" class="pull-right">Currency Code</label>
                </div>
                <div class="col-xs-9">
                <div class="lnbrd">
                <input type="text" class="form-control" name="crncycode" placeholder="Enter Currency Code">
                </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-3">
                <label for="forrate" class="pull-right">Foreign Currency Rate<?php echo isset($icon)?$icon:''; ?></label>
                </div>
                <div class="col-xs-9">
                <div class="lnbrd">
                <input type="text" class="form-control" name="forrate" placeholder="Enter Foreign Currency Rate.">
                </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-3">
                <label for="taxpercent" class="pull-right">Tax &#37;</label>
                </div>
                <div class="col-xs-9">
                <div class="lnbrd">
                <input type="text" class="form-control" name="taxpercent" placeholder="Enter Tax Percentage">
                </div>
                </div>
            </div>
        </form>         
    </div>
    <div class="modal-footer clearfix">
        <button type="button" class="btn btn-danger pull-right" id="addcountryformsubmitbtn">Add</button>
    </div>
</div>

注意:- 从数据库的角度来看,代码按预期工作。


我所看到的几件事可能是原因。

如果您使用 IE,我发现在执行 POST 之前立即执行 GET(到相同的 URL,发送相同的数据),因此值得尝试在您的服务器上检查这一点(并忽略得到)

其他的可能是在 AJAX 调用之后将以下内容添加到按钮单击事件的末尾(实际上,通常我会将第一行放在顶部,并带有阻止默认值,并且 return 语句显然位于最后)。 。

e.stopImmediatePropagation();
return false;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

通过ajax POST提交两次表单 的相关文章

随机推荐