自定義AJAX表單不能正常工作異步

Question

我有一個聯繫人使用PHP郵件程序，我已經集成到我的Wordpress博客。該腳本發送電子郵件沒有問題 - 問題是它不起作用的異步，所以一旦表單被提交，我被帶到另一個頁面上，其中包含以下文本：{"message":"Your message was successfully submitted from PHP."}。該腳本在wordpress以外使用時能夠按預期工作 - 我不知道發生了什麼。

PHP

<?php 

    /** 
    * Sets error header and json error message response. 
    * 
    * @param String $messsage error message of response 
    * @return void 
    */ 
    function errorResponse ($messsage) { 
    header('HTTP/1.1 500 Internal Server Error'); 
    die(json_encode(array('message' => $messsage))); 
    } 
    /** 
    * Pulls posted values for all fields in $fields_req array. 
    * If a required field does not have a value, an error response is given. 
    */ 
    function constructMessageBody() { 
    $fields_req = array("name" => true, "description" => true, "email" => true, "number" => true); 
    $message_body = ""; 
    foreach ($fields_req as $name => $required) { 
     $postedValue = $_POST[$name]; 
     if ($required && empty($postedValue)) { 
     errorResponse("$name is empty."); 
     } else { 
     $message_body .= ucfirst($name) . ": " . $postedValue . "\n"; 
     } 
    } 
    return $message_body; 
    } 


//header('Content-type: application/json'); 


//attempt to send email 
$messageBody = constructMessageBody(); 
require 'php_mailer/PHPMailerAutoload.php'; 
$mail = new PHPMailer; 
$mail->CharSet = 'UTF-8'; 

$mail->setFrom($_POST['email'], $_POST['name']); 
$mail->addAddress("example@example.com"); 
$mail->Subject = $_POST['name']; 
$mail->Body = $messageBody; 
//try to send the message 
if($mail->send()) { 
    echo json_encode(array('message' => 'Your message was successfully submitted from PHP.')); 
} else { 
    errorResponse('An expected error occured while attempting to send the email: ' . $mail->ErrorInfo); 
} 

?> 

(function($) { 
 
    
 
     $('#form').on('submit', function(){ 
 
     event.preventDefault(); 
 
     
 
     var contactFormUtils = { 
 
      clearForm: function() { 
 
      grecaptcha.reset(); 
 
      }, 
 
      addAjaxMessage: function(msg, isError) { 
 
      $("#feedbackSubmit").append('<div id="emailAlert" class="alert alert-' + (isError ? 'danger' : 'success') + '" style="margin-top: 5px;">' + $('<div/>').text(msg).html() + '</div>'); 
 
      } 
 
     }; 
 
    
 
    
 
     $('#submit-email').prop('disabled', true).html("sending"); 
 
    
 
      var that = $(this), 
 
      url = that.attr('action'), 
 
      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(data) { 
 
       console.log('success'); 
 
       $('#form').fadeOut(400) 
 
       contactFormUtils.addAjaxMessage(data.message, false); 
 
       contactFormUtils.clearForm(); 
 
    
 
      }, 
 
      error: function(response) { 
 
       console.log('error'); 
 
       contactFormUtils.addAjaxMessage(response.responseJSON.message, true); 
 
       $('#submit-report').prop('disabled', false).html("Send message"); 
 
       contactFormUtils.clearForm(); 
 
    
 
      }, 
 
      complete: function() { 
 
       console.log('complete'); 
 
    
 
      } 
 
      }); 
 
    
 
     return false; 
 
     }); 
 
    })(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-sm-8 site-block"> 
 
      <form id="form" method="post" class="form-horizontal ajax" action="<?php echo get_template_directory_uri(); ?>/assets/php/process-contact.php" data-toggle="validator"> 
 
       <div class="form-group"> 
 
       <label for="inputName" class="col-sm-2 control-label">Name</label> 
 
       <div class="col-sm-10"> 
 
        <input name="name" type="text" class="form-control" id="inputName" placeholder="Enter your full name and title here" required> 
 
       </div> 
 
       </div> 
 
       <div class="form-group"> 
 
       <label for="inputEmail3" class="col-sm-2 control-label">Phone</label> 
 
       <div class="col-sm-10"> 
 
        <input name="number" type="number" class="form-control" id="inputEmail3" placeholder="Enter your preferred telephone number here" required> 
 
       </div> 
 
       </div> 
 
       <div class="form-group"> 
 
       <label for="inputEmail" class="col-sm-2 control-label">Email</label> 
 
       <div class="col-sm-10"> 
 
        <input name="email" type="email" class="form-control" id="inputEmail" placeholder="Enter your preferred email address here" required> 
 
       </div> 
 
       </div> 
 
       <div class="form-group"> 
 
       <label for="inputMessage" class="col-sm-2 control-label">Message</label> 
 
       <div class="col-sm-10"> 
 
        <textarea name="description" class="form-control" id="inputMessage" placeholder="Type your message here" rows="3"></textarea> 
 
       </div> 
 
       </div> 
 
    
 
       <div class="form-group"> 
 
       <div class="col-sm-offset-2 col-sm-10"> 
 
        <button id="submit-email" name="submit" type="submit" class="btn btn-danger">Submit</button> 
 
       </div> 
 
       </div> 
 
      </form> 
 
    \t \t \t \t <div id="feedbackSubmit"></div> 
 
    
 
      </div>

Answer 1

變化

jQuery('#form').on('submit', function(){ 

到

jQuery('.ajax').on('submit', function(event){ 

與jQuery

和

替換所有$包裝你的代碼文件準備功能

jQuery(function(){});