如何从 PHP (JSON) 读取数组并通过 JS 填充少量输入答案

【问题标题】：How to read array from PHP (JSON) and fill few inputs via JS如何从 PHP (JSON) 读取数组并通过 JS 填充少量输入
【发布时间】：2015-01-26 05:05:09
【问题描述】：

我正在构建小型网络应用程序，我想：

从用户输入中读取变量
当用户点击链接时，通过 AJAX 将此 var 传递给 PHP
接收数组 (JSON)
解析数组并将它们填充到两个输入值中

最后一个动作对我来说很难。

PHP 简单示例：

<?php
$array = array("name" => "James", "surname" => "Bond");
echo json_encode($array);
?>

我的 HTML 是这样的：

    <script>
        $(document).ready(function(){
            $("#click_me").click(function(){
                $.post('127.0.0.1/read_from_php/', {
                    my_var : $("#my_var").val()
                }, function(data) {
                    //how to read and parse JSON from PHP here
                    //and put name and surname as a input value below:
                    $('#name').val(data);
                    $('#surname').val(data);
                });
            });
        });
    </script>

<input type="text" id="my_var" name="my_var" value="">
<a href="#" id="click_me">Click to read from PHP</a>

<div id="my_div">.. loading ..
   <input type="text" name="name"    id="name"    value="name"/>
   <input type="text" name="surname" id="surname" value="surname"/>
</div>

【问题讨论】：

标签： javascript php jquery json

【解决方案1】：

使用JSON.parse()将json字符串转换为对象：

<script>
    $(document).ready(function(){
        $("#click_me").click(function(){
            $.post('127.0.0.1/read_from_php/', {
                my_var : $("#my_var").val()
            }, function(data) {
                var person = JSON.parse(data);
                $('#name').val(person.name);
                $('#surname').val(person.surname);
            });
        });
    });
</script>

或者，您也可以更改为$.getJSON()，因为它已经在内部处理了解析。

【讨论】：

很高兴为您提供帮助，不要忘记标记答案以帮助他人。 :P

【解决方案2】：

var obj = jQuery.parseJSON(json_data);

之后，您可以随意使用它。 obj.name，obj.surname

【讨论】：

【解决方案3】：

在使用 PHP 渲染 JSON 时设置正确的内容类型标头

<?php
$array = array("name" => "James", "surname" => "Bond");
header('Content-Type: application/json');
echo json_encode($array);
?>

向jQuery.post 调用添加一个数据类型，它会告诉jQuery 期望JSON 响应。这应该允许您直接访问数据对象而无需任何额外的解码调用，阅读此文档以获取更多信息http://api.jquery.com/jquery.post/

<script>
    $(document).ready(function(){
        $("#click_me").click(function(){
            $.post(
                '127.0.0.1/read_from_php/',
                {
                    my_var : $("#my_var").val()
                },
                function(data) {
                    //how to read and parse JSON from PHP here
                    //and put name and surname as a input value below:
                    $('#name').val(data.name);
                    $('#surname').val(data.surname);
                },
                'json'
            );
        });
    });
</script>

【讨论】：