jQuery ajax無法發布數據參數

Question

我正在嘗試使用JQuery Ajax發布一個使用PHP作為處理程序的簡單聯系表單。

Index.html

<form  name="signup-form" method="post" accept-charset="utf-8" class="signup-form">
   <input class="signup-input" type="email" name="email_address" value="" placeholder="enter your email..." title="Please enter a valid email address." required>
   <input type="submit" class="submit-btn" value="GO"/>
</form>

相應的JavaScript正確地序列化了瀏覽器的輸入，但我不斷得到：

SyntaxError: Unexpected end of input at Object.parse (native)

JS-site.json

$(document).ready(function(){
  $(".signup-form").submit(function(e){

    var formData = $(this).serialize();
    var data = {
      "action": "test"
    };
    data = $(this).serialize() + "&" + $.param(data);

      $.ajax({
        type: "POST",
        dataType: "json",
        url: "server.php", //Relative or absolute path to response.php file
        data: data,
        success: function(data) {
          $(".the-return").html(
            "Email: " + data["email_address"]
          );

          alert("Form submitted successfully.\nReturned json: " + data["json"]);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown){
            console.log(XMLHttpRequest);
            console.log(textStatus);
            console.log(errorThrown);

        }
      });
    return false;
  });
});

編輯的PHP-server.php

<?php
header('Access-Control-Allow-Origin: *');


if (is_ajax()) {
  if (isset($_POST["action"]) && !empty($_POST["action"])) { //Checks if action value exists
    $action = $_POST["action"];
    switch($action) { //Switch case for value of action
      case "test": test_function(); break;
    }
  }
}

//Function to check if the request is an AJAX request
function is_ajax() {
  return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}

function test_function(){

  header("Content-Type: application/json");
  echo json_encode($_POST);
}

Answer 1

我不確定您要確切執行的操作，但是顯而易見的一件事是您的PHP代碼正在返回嵌套對象。

{email_address: "{"email_address":"asdf@asdf.org","action":"test"}", action: "test"}

這就是您的JSON在返回時的樣子。 如果您只想將$ _POST數據吐回到瀏覽器中，則只需執行以下操作：

function test_function(){
  echo json_encode($_POST);
}

然后在JS端的成功方法中修改警報：

alert("Form submitted successfully.\nReturned json:\n" + JSON.stringify(data));

另一件事，在您的php代碼中設置content-type標頭是一個非常好的主意，可能是在檢查X-Requested-With之后，但在向瀏覽器吐出任何數據之前：

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

Answer 2

我發現了為什么它不起作用。

您的is_ajax()檢查此$_SERVER['HTTP_X_REQUESTED_WITH'] ，如果您使用的是CORS，則不會設置該值。 因此，一個簡單的解決方法就是禁用此檢查。

<?php
header('Access-Control-Allow-Origin: *');
header("Content-Type: application/json");

//print_r($_SERVER);

if (isset($_POST["action"]) && !empty($_POST["action"])) { //Checks if action value exists
  $action = $_POST["action"];
  switch($action) { //Switch case for value of action
    case "test": test_function(); break;
  }
}

function is_ajax() {
  return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}

function test_function(){
  $return = $_POST;

  //$return["email_address"] = json_encode($return);
  echo json_encode($return);
  exit;
}

另外，不要忘記使用data['email_address']訪問JSON， data['json']沒有任何內容。