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

标签 javascript php jquery json

我正在构建小型网络应用程序,我想要:

  • 从用户输入中读取变量
  • 当用户单击链接时,通过 AJAX 将此变量传递给 PHP
  • 接收数组(JSON)
  • 解析数组并将其填充为两个输入值

最后一个 Action 对我来说很难。

简单的 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>

最佳答案

使用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()因为它已经在内部处理解析了。

关于javascript - 如何从 PHP (JSON) 读取数组并通过 JS 填充少量输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28141258/

相关文章:

javascript - 如果 X 在一个数字范围内,我如何为 X 分配一个数字?

Javascript 字符串转二维数组

jquery - jQuery 的多列自动完成?

javascript - 自动化 CSS 图像轮播

javascript - 为什么我的函数作用域变量没有按预期设置?

javascript - 将所有逗号分隔的数字替换为 javascript 中字符串中的点分隔数字

php - gzip 并作为字符串返回

php - Laravel - 加载不同的 .env 文件

javascript - 刷新数据表错误

javascript - 使用两个嵌套 for 循环在 JavaScript 和 jQuery 中动态分配 ID 并附加数据