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代码中设置你的内容类型标题是一个非常好的主意，可能在你检查X-Requested-With之后，但是在你向浏览器吐出任何数据之前： / p>

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']

也不要忘记使用data['json']访问JSON，tm没有任何内容。

JQuery ajax无法发布数据参数

2 个答案: