jQueryが失敗しました：エラーがスローされたparsererror：SyntaxError：JSON入力の予期しない終了

Question

ajaxを介してPHPスクリプトに渡される連絡先フォームがあります。フォームが処理されると、ajaxはPHPスクリプトのjson_encode（）関数から受け取ったレスポンスに応じていくつかのアクションを実行します。

parsererror にSyntaxError：4 responseText： "" 状況：200 STATUSTEXT： "OK"

JSON入力

のreadyStateの予期しない終了問題は、私は、次のエラーメッセージが表示されますですdataTypeはajax呼び出しのテキストであり、PHPスクリプトは単にテキストメッセージをエコーし​​、コードは正常に動作しますが、jsonでは上記のエラーが発生します。

私はheader（ "Content-Type：application/json"）とJSON.parse（）を成功させました。ヘッダにcharset = "UTF-8"を追加し、json_encodeに渡された配列のencode_utf8（）関数も試してみましたが、何も私にとってうまくいかないようです。

以下の関連ファイルのコードを掲載しています。この問題を解決するための助けがあれば幸いです。

contact.php

<form action="" method="post" name="contactForm" id="contactForm"> 

    <div class="form-row">   
     <div id="contactFormResponse"></div> 

     <div class="form-col"> 
      <label for="orderNumer">Order Number</label> 
      <input type="text" name="orderNumber" id="orderNumber" value="<?php echo ($_POST['orderNumber']); ?>" /> 
     </div> 

     <div class="form-col"> 
      <label for="comment">Comment *</label> 
      <textarea name="message" id="comment" maxlength="2000" rows="5"><?php echo ($_POST['comment']); ?></textarea> 
     </div> 

     <div class="form-col"> 
      <label for="title">Title *</label> 
      <select name="title" id="title"> 
       <option value="" <?php if ($_POST['title'] == "") {echo "selected='selected'";} ?>>Select a title...</option> 
       <option value="ms" <?php if ($_POST['title'] =="ms") {echo "selected='selected'";} ?>>Ms</option> 
       <option value="miss" <?php if ($_POST['title'] == "miss") {echo "selected='selected'";} ?>>Miss</option> 
       <option value="mrs" <?php if ($_POST['title'] == "mrs") {echo "selected='selected'";} ?>>Mrs</option> 
       <option value="mr" <?php if ($_POST['title'] == "mr") {echo "selected='selected'";} ?>>Mr</option> 
       <option value="other" <?php if ($_POST['title'] == "other") {echo "selected='selected'";} ?>>Other</option> 
      </select> 
     </div> 

     <div class="form-col"> 
      <label for="firstName">First Name *</label> 
      <input type="text" name="firstName" id="firstName" value="<?php echo ($_POST['firstName']); ?>" /> 
     </div> 

     <div class="form-col"> 
      <label for="surname">Surname *</label> 
      <input type="text" name="surname" id="surname" value="<?php echo ($_POST['surname']); ?>" /> 
     </div> 

     <div class="form-col"> 
      <label for="email">Email Address *</label> 
      <input type="text" name="email" id="email" value="<?php echo ($_POST['email']); ?>" /> 
     </div> 

     <div class="form-col"> 
      <input type="submit" name="submitContactForm" id="submitContactForm" value="Submit" class="btn" /> 
     </div> 

    </div> 
</form> 

jsCode.js

// process contact form 
$("#contactForm").submit(function(e) { 

    e.preventDefault(); 

    // some jQuery validation goes here... 

    $.ajax({ 
     type:"POST", 
     url: "functions.php", 
     dataType: "json", 
     data: new FormData(this), 
     //data: $('form').serialize(), 
     processData: false, 
     contentType: false, 
     success:function(response) { 
      if(response.status === "OK") { 
       $("#contactFormResponse").html("<div class='alert alert-success' id='message'></div>"); 
       $("#message").html(response.message).fadeIn("100"); 
       $("#contactForm")[0].reset(); 
       $(window).scrollTop(0); 
      } else if (response.status === "error") { 
       $("#contactFormResponse").html("<div class='alert alert-danger' id='message'></div>"); 
       $("#message").html(response.message).fadeIn("100"); 
       $(window).scrollTop(0); 
      } 
     }, 
     error:function(jqXHR, textStatus, errorThrown) { 
      console.log("JQuery failed: " + textStatus + " with error thrown: " + errorThrown); 
      console.log(jqXHR); 

     } 
    }); 
}); 

のfunctions.php

// send email 
function sendMessage() { 

    if (isset($_POST["submitContactForm"])) { 
     if (!$_POST["comment"]) { 
      $error .= "<br />Comment is required."; 
     } 

     if (!$_POST["firstName"]) { 
      $error .= "<br />First name is required."; 
     } 

     // validation for other form fields goes here... 

     if ($error) { 
      echo json_encode(array("status" => "error", "message" => "There were error(s)in your form: " . $error)); 

     } else { 

      $to   = "email@domain.com"; 
      $subject  = "Message from the website"; 
      $order_number = $_POST["orderNumber"]; 
      $comment  = $_POST["comment"]; 
      $title   = $_POST["title"]; 
      $first_name = $_POST["firstName"]; 
      $surname  = $_POST["surname"]; 
      $email_address = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL); 
      $headers  = "From: " . $title . " " . $first_name . " " . $surname . " <" . $email_address . " >"; 
      $message  = "Order Number: " . $order_number . "/r/n" . "Topic: " . $topic . "/r/n" . "Comment: " . $comment; 

      $result = mail($to, $subject, $message, $headers); 

      if (!$result) { 

       echo json_encode(array("status" => "error", "message" => "Message failed.")); 

      } else { 

       echo json_encode(array("status" => "OK", "message" => "Message sent.")); 

      } 
     } 
    } 
} 

Answer 1

あなたsuccess機能でJSONレスポンスを解析していない、あなたが使用する必要があります$.parseJSON(response)以下のように

success:function(res) { 
var response=$.parseJSON(res); 
       if(response.status === "OK") { 
        $("#contactFormResponse").html("<div class='alert alert-success' id='message'></div>"); 
        $("#message").html(response.message).fadeIn("100"); 
        $("#contactForm")[0].reset(); 
        $(window).scrollTop(0); 
       } else if (response.status === "error") { 
        $("#contactFormResponse").html("<div class='alert alert-danger' id='message'></div>"); 
        $("#message").html(response.message).fadeIn("100"); 
        $(window).scrollTop(0); 
       } 
      },