PHP Jquery POST - 发送重复数据

Question

我有一个PHP表单，可以在jQuery的帮助下发送数据。每当我点击“提交”时，我看到它会发送两次数据，导致双重数据库条目，依此类推。

此外，我还在研究如何在try / catch块中显示“错误”和异常。

注意：此表单适用于其他网站，我只更改字段以及发送数据但无法使其生效。

感谢您的帮助。

注册表

<div id="registration" class="representativeForm">
	<div class="result">
	</div>
	<div class="formbody">
		<div class="left">
			<input required="required" type="text" name="name" placeholder="Your name" />
			<input required="required" type="text" name="surname" placeholder="Your surname" />
			<input required="required" type="text" name="birthdate" placeholder="Your birth date" />
			<input required="required" type="text" name="nationality" placeholder="Your nationality" />
			<?php  countriesSelection($con, $_LANG, "country"); ?>
			<input required="required" type="email"  name="email" placeholder="Your Email adress" />
			<input required="required" type="text" name="position" placeholder="Your title or job position" />
			<div class="schoolSelectionfields">
				<?php schoolSelection($con, $_LANG, "schools");  ?>
			</div>
			<input type="checkbox" id="schoolnotlisted" name="schoolnotlisted" value="1">Your school is not listed? Register school here.<br />
		</div>
		<div class="right">
			<div class="school_register">
				<?php  schoolRepresentativeRegistration($_LANG, $con); ?>
			</div>
		</div>
	</div>
	<input type="hidden" name="form" value="representativeForm">
	<input type="submit" value="Register" id="representativeSubmit" />
</div>

jQuery代码

 $("#representativeSubmit").click(function() { 

    var proceed = true;
    //simple validation at client's end
    //loop through each field and we simply change border color to red for invalid fields
    $("#registration.representativeForm input[required=true]").each(function(){
        $(this).css('border-color',''); 
        if(!$.trim($(this).val())){ //if this field is empty 
            $(this).css('border-color','red'); //change border color to red   
            proceed = false; //set do not proceed flag
        }
        //check invalid email
        var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
        if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))) {
            $(this).css('border-color','red'); //change border color to red   
            proceed = false; //set do not proceed flag              
        }
    });
    if(proceed) //everything looks good! proceed...
    {
        //get input field values data to be sent to server
        post_data = {
            'form'     : $('input[name=form]').val(),
            'name'     : $('input[name=name]').val(), 
            'surname'    : $('input[name=surname]').val(), 
            'birthdate'  : $('input[name=birthdate]').val(), 
            'nationality'  : $('input[name=nationality]').val(), 
            'email'  : $('input[name=email]').val(), 
            'position'  : $('input[name=position]').val(), 
            'country'  : $('select[name=country]').val(), 
        };

        if($("#schoolnotlisted").prop('checked') == true) {
            post_data += {
                'schoolName'  : $('input[name=schoolName]').val(), 
                'schoolAddress'  : $('input[name=schoolAddress]').val(), 
                'schoolZipcode'  : $('input[name=schoolZipcode]').val(), 
                'schoolCity'  : $('input[name=schoolCity]').val(), 
                'schoolCountry'  : $('select[name=schoolCountry]').val()
            };
        }
        else {
            post_data += {
                'schools'  : $('select[name=schools]').val()
            };
        }
        //Ajax post data to server
        $.post('registration.php', post_data, function(response){  
            if(response.type == 'error'){ //load json data from server and output message     
                output = '<div class="error">'+response.text+'</div>';
            }else{
                output = '<div class="success">'+response.text+'</div>';
                //reset values in all input fields
                $("#registration.representativeForm  input[required=true]").val(''); 
                $("#registration.representativeForm .formbody").slideUp(); //hide form after success
            }
            $("#registration .result").hide().html(output).slideDown();
        }, 'json');
    }
});
//reset previously set border colors and hide all message on .keyup()
$("#registration.representativeForm  input[required=true]").keyup(function() { 
    $(this).css('border-color',''); 
    $(".result").slideUp();
});

Answer 1

尝试将事件处理程序更改为表单本身，而不是更改为提交按钮，并在其中放置event.preventDefault()语句。由于您没有发布您的表单代码，我只是将其命名为＃34; form＆＃34;。

$( "#form" ).submit(function( event ) {
    event.preventDefault();
    // here comes everything from the click handler attached to "#representativeSubmit"
});

你的发布量增加一倍的原因是你执行了附加到提交功能的功能，之后也会将提交事件提供给表单。

Answer 2

它会发送重复数据，因为您绑定了提交按钮的click事件。绑定函数完成后，表单会提交 - 触发submit事件，但您没有绑定到此事件，因此它会发送另一个请求。

您没有在代码中包含form，因此我假设它存在于您的代码中的上方

更改行

$("#representativeSubmit").click(function() { 

到

$("#representativeSubmit").closest('form').submit(function() { 

这将选择换行表单，并将您的例程绑定到该表单的提交事件。

另外，您是否可以在浏览器的开发者工具中确认是否实际有2个AJAX调用？如果您使用的是Chrome，请按F12并转到“网络”标签，然后按XHR过滤。在点击任何内容之前执行此操作。

Answer 3

单击

时修复重复请求ajax

$('#representativeSubmit').unbind().bind('click', function(event){
    event.preventDefault();
    //.....
});