如何通过 jQuery Ajax 发布数据在 PHP 中编码 JSON？答案

【问题标题】：How do I encode JSON in PHP via jQuery Ajax post data?如何通过 jQuery Ajax 发布数据在 PHP 中编码 JSON？
【发布时间】：2013-10-23 06:01:14
【问题描述】：

我有一个 HTML 表单，并在点击提交按钮时将数据发送到 php 文件。

$.ajax({
    url: "text.php",
    type: "POST",
    data: {
        amount: amount,
        firstName: firstName,
        lastName: lastName,
        email: email
    },
    dataType: "JSON",
    success: function (data) {
        console.log("ok");
        $("#result").text(data);
    }
});

在 PHP 中：

<?php
    $amount      = $_POST["amount"];
    $firstName   = $_POST["firstName"];
    $lastName    = $_POST["lastName"];
    $email       = $_POST["email"];
    if(isset($amount)){
        $data = array(
            "amount"     => $amount,
            "firstName"  => $firstName,
            "lastName"   => $lastName,
            "email"      => $email
        );
        echo json_encode($data);
    }
?>

结果是[object object]。我想要这样的类型：

{"Amount":"12.34", "FirstName":"Any", "LastName":"Tester", "Email":"a.test@something.com"}

我做错了什么？

【问题讨论】：

The result is [object object]... 是的，如果 JS 将对象强制转换为字符串，就会得到这样的结果。您的 JSON 可能是正确的；你只是没有正确地检查它。尝试改用console.log()。此外，使用开发工具查看 PHP 发回的 http 响应——您应该能够准确地看到数据的样子。
在开发工具方面，您可以试一试 FirePHP4Chrome。
您是否将 PHP 的内容标头设置为 application/json？
我同意 Spudley 的观点，如果您只是想确保尝试 console.log 或提醒 data.Amount 或 data.FirstName，它会给您带来价值。

标签： javascript php jquery ajax json

【解决方案1】：

您的对象很可能已正确传递。正如@Spudley 解释的那样，这是您捕获返回[object object] 的结果的方式。控制台不知道如何显示构造，但您可以使用 object.attribute 语法显示特定属性。在 JS 端使用console.log() 或下面的代码以获得美化输出。

// Indent with tabs
// Data is the parameter sent to the success function in the ajax handler
JSON.stringify( data , null, '\t');

来自How can I pretty-print JSON in (unix) shell script?

如果您感觉到某处存在错误，还可以暂时删除 ajax 处理程序上的 dataType。让输出显示在 GET 请求上应该可以。对于任何修改数据库删除或更改等操作的操作，将其改回 POST。

最后，修改标题，如@GroovyCarrot 的答案所示。如果您使用的是 Chrome，多余的空格似乎是一个错误：Tab and pre wrapped around JSON output in Chrome

【讨论】：

【解决方案2】：

尝试添加

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

在你的 PHP 脚本的顶部，看看你得到了什么

希望有帮助！

编辑：忘了提你应该像这样访问你的值：data.amount

【讨论】：

好主意，但它不能解决问题:) 就像 James Poulson 所说，json 对象被正确传递，但对象 toString 方法返回 [object object]
真的没必要，因为jQuery真的不在乎
我确实添加了一条关于正确访问 JSON 对象返回值的评论，我同意这个答案有点简短

【解决方案3】：

您正在将结果对象转换为字符串，而不是显示它。

如果你想在某个包装器中打印对象，而不是结果，你可以这样做：

var text = '{';

for(var i in data) {
  var value = data[i];

  text += '"'+i+'":"'+value+'", ';
}

text += '}';

$('#result').text(text);

但您可能会认为console.log 是查看 json 格式响应的更简单快捷的方式。

【讨论】：

适用于不支持 JSON.strigify 的浏览器

【解决方案4】：

您不能直接将 JSON 对象插入 dom。 JSON 对象toString() 方法总是会给你[对象对象]，这就是你得到这个的原因。您必须使用解析数据 JSON.stringify(data) 或者你必须运行 $.each(data,function(val){ $("#result").append(val) })。

【讨论】：

【解决方案5】：

带有 JSON.stringify 的代码示例：

<html>
    <head>
       <title>jQuery Test</title>
       <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
       <script type="text/javascript">
           $(document).ready(function() {
               $("#submit").click(function(){
                   $.ajax({
                       url: "text.php",
                       type: "POST",
                       data: {
                           amount: $("#amount").val(),
                           firstName: $("#firstName").val(),
                           lastName: $("#lastName").val(),
                           email: $("#email").val()
                       },
                       dataType: "JSON",
                       success: function (jsonStr) {
                           $("#result").text(JSON.stringify(jsonStr));
                       }
                   });
               });
           });
       </script>
    </head>

    <body>
        <div id="result"></div>
        <form name="contact" id="contact" method="post">
            Amount: <input type="text" name="amount" id="amount"/><br/>
            firstName: <input type="text" name="firstName" id="firstName"/><br/>
            lastName: <input type="text" name="lastName" id="lastName"/><br/>
            email: <input type="text" name="email" id="email"/><br/>
            <input type="button" value="Get It!" name="submit" id="submit"/>
        </form>
    </body>
</html>

text.php

<?php
    $amount      = $_POST["amount"];
    $firstName   = $_POST["firstName"];
    $lastName    = $_POST["lastName"];
    $email       = $_POST["email"];
    if(isset($amount)){
        $data = array(
            "amount"     => $amount,
            "firstName"  => $firstName,
            "lastName"   => $lastName,
            "email"      => $email
        );
        echo json_encode($data);
    }
?>

【讨论】：