javascript - 虽然 Ajax 多次提交但表单已提交

Question

当我通过 Ajax 提交此表单时，Ajax 会多次发布该表单，有时会发布多达 10 次，即使只单击一次提交按钮。我不明白它为什么这样做。任何帮助都会很棒! 这是我的代码:

<script type="text/javascript">

var messageDelay = 2000;
$( init );
    function init() {
      $('#messageform').show().submit( submitForm );
  $('#rtypeshow').hide();
      $('a[href="#messageform"]').click( function() {
    $('#content').fadeTo( 'slow', .2 );
    $('#messageform').fadeIn( 'slow', function() {
      $('#senderName').focus();
    } )

    return false;
  } );

     $(document).ready(function (){
     $("#messagetable").load("messagetable.php");
            $("#etype").change(function() {
                if ($(this).val() != "0") {
                    $("#rtypeshow").show();
                    $('#datepicker').attr('required', 'required');
                }else{
                    $("#rtypeshow").hide()
                    $("#allowed").hide;
                    $('#datepicker').removeAttr('required');
                    $('#allowed1').removeAttr('required');
                } 
            });
        });
         $(document).ready(function (){
            $("#rtype").change(function() {
                var selection = $(this).val();
                if (selection == "1") {
                  $("#allowed").show();
                  $('#allowed1').attr('required', 'required');
                }else{
                    $("#allowed").hide();
                    $('#allowed1').removeAttr('required');
                } 
            });
        });
}
  function submitForm() {
  var messageform = $(this);
  if ( !$('#ename').val() || !$('#message').val() ) {
    $('#incompleteMessage').fadeIn().delay(messageDelay).fadeOut();
    messageform.fadeOut().delay(messageDelay).fadeIn();

  } else {
 $('#sendingMessage').fadeIn();
    messageform.fadeOut();

    $.ajax( {
      url: messageform.attr( 'action' ) + "?ajax=true",
      type: messageform.attr( 'method' ),
      data: messageform.serialize(),
      success: submitFinished
    } );
  }
  return false;
}
function submitFinished( response ) {
  response = $.trim( response );
  $('#sendingMessage').fadeOut();

  if ( response == "success" ) {
    $('#successMessage').fadeIn().delay(messageDelay).fadeOut();
    $('#ename').val( "" );
    $('#message').val( "" );
    $('#datepicker').val( "" );
    $('#allowed1').val( "" );
    $('#allowed2').val( "" );
    $('#allowed3').val( "" );
    $('#allowed4').val( "" );
    $("#messagetable").load("messagetable.php");

    $('#content').delay(messageDelay+500).fadeTo( 'slow', 1 );
    $('#messageform').show().submit( submitForm );

  } else {
    $('#failureMessage').fadeIn().delay(messageDelay).fadeOut();
    $('#messageform').delay(messageDelay+500).fadeIn();
  }
}

</script>

<form id="messageform" action="message_forward.php" method="post">
<p>
  <label for="ename">Event Name</label>
  <input name="ename" type="text" id="ename" required="required">
</p>

<p>
  <label for="message">Message</label>
  <span id="sprytextarea1">
  <textarea name="message" id="message" required="required"></textarea>
  <span id="countsprytextarea1">&nbsp;</span><span class="textareaRequiredMsg">A value is required.</span><span class="textareaMaxCharsMsg">Exceeded maximum number of characters.</span></span></p>
<p>
  <label for="etype">Response Required</label>
  <select name="etype" size="2" id="etype">
    <option value="0" selected="selected">No</option>
    <option value="1">Yes</option>
  </select>
</p>
<div id="rtypeshow" style="display:none;">
Event Resender End Date: 
  <span id="sprytextfield1">
  <input name="datepicker" type="text" id="datepicker" size="10">
MM/DD/YYYY <span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br>
  Send Response To:                 <select name="eforward" id="eforward">
                  <?php
do {  
?>
                  <option value="<?php echo $row_Recordset1['cphone']?><?php echo $row_Recordset1['provider']?>"><?php echo $row_Recordset1['fullname']?>-SMS Message via Cell Phone</option>
                  <option value="<?php echo $row_Recordset1['email']?>"><?php echo $row_Recordset1['fullname']?>-Email Message</option>
<?php
} while ($row_Recordset1 = mysql_fetch_assoc($Recordset1));
  $rows = mysql_num_rows($Recordset1);
  if($rows > 0) {
      mysql_data_seek($Recordset1, 0);
      $row_Recordset1 = mysql_fetch_assoc($Recordset1);
  }
?>
                </select><br>
  <label for="question">Question for responses</label>
<input type="text" name="question" id="question" maxlength="18"><br>
  <label for="rtype">Response Type</label>
  <select name="rtype" size="3" id="rtype">
    <option value="0" selected="selected">Standard Yes/No Response</option>
    <option value="1">Create Responses</option>
    <option value="2">Get Users Own Response</option>
  </select>
<div id="allowed" style="display:none;">
<h4>Response Options</h4>
<label for="allowed1">Option 1</label>
<input type="text" name="allowed1" id="allowed1" maxlength="12" placeholder="Required">Max Length = 12
<label for="allowed2"><br>
  Option 2</label>
<input type="text" name="allowed2" id="allowed2" maxlength="12" placeholder="Optional">Max Length = 12
<br>
  <label for="allowed3">Option 3</label>
  <input type="text" name="allowed3" id="allowed3" maxlength="12" placeholder="Optional">Max Length = 12
  <label for="allowed4"><br>
    Option 4</label>
  <input type="text" name="allowed4" id="allowed4" maxlength="12" placeholder="Optional">Max Length = 12
   </div>
</div>
 <input name="submit" type="submit" value="Send Messages">
 </form>

附加评论: 第二次发送消息似乎比在发送另一条消息之前刷新页面更糟糕。

Answer 1

看起来您的代码将 submitForm 函数多次附加到 submit 处理程序。

在您的 submitFinished 函数中，您再次附加处理程序:

$('#messageform').show().submit( submitForm );

您可以通过刷新页面然后提交表单来检查这一点。如果刷新后只提交一次，然后多次提交，您就知道这就是问题所在。