HTML文件、PHP文件、JSON文件之间通过AJAX编程简单传递数据

最新推荐文章于 2022-10-29 15:42:16 发布

小船划向前端

最新推荐文章于 2022-10-29 15:42:16 发布

阅读量4.2k

点赞数

分类专栏： JavaScript 文章标签： html ajax php json

本文链接：https://blog.csdn.net/wayne0902/article/details/51788620

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JSON是一种数据格式，不属于任何语言，因而它可在不同语言之间进行传递，但是JSON有简单值、对象、数组三种类型的值，而每个语言对对象和数组的表示语法都不相同，那如何实现JSON中的数据在不同语言之间传递呢。
字符串在任何语言中的表示语法都是相同的（至少绝大多数吧…），都是用引号包裹起来的，因此可以将JSON转换成字符串。然后不同的语言有不同的JSON解析器函数，如JS中JSON.parse(str)即可把JSON格式的字符串str转换成有用的JS对象，从而使数据在网页进行显示或操作等；相反，将JS对象转换成JSON格式的字符串这一过程称为序列化，相应函数为JSON.stringify(obj)。
另外，如果字符串不是有效的JSON，JSON.parse(str)会抛出错误，这点在传输数据时需注意，如
str=
“height”，会报错，此时不需要转换即是所得数据
“‘height’”，仍会报错，因为JSON里任何字符串都必须是双引号！（包括对象属性）
‘“height”’，正确
‘{“name”:”Wayne”,”age”:18}’，正确

好了，开始传输数据，目前尚不会数据库，模拟JSON为数据库中的数据，简单写个PHP文件获取JSON数据，如下：

<?php
    // 指定文档类型
    // 可以不指定
    header('Content-Type: application/json; charset=utf-8');

    // 1、PHP连接数据库、读取数据
    // 2、一般情况下会将读取的数据转成数组
    // 3、需要通过json_encode() 来转成json
    // 4、可以将json数据echo，返回给js 或其它语言

    $result = file_get_contents('stars.json');
    echo $result;
?>

JSON文件：

[
    {
        "name": "王力宏",
        "photo": "./images/wlh.jpg",
        "ablum": "<<改变自已>>",
        "age": 39,
        "sex": "男"
    },
    {
        "name": "王力宏",
        "photo": "./images/wlh.jpg",
        "ablum": "<<改变自已>>",
        "age": 39,
        "sex": "男"
    },
    {
        "name": "王力宏",
        "photo": "./images/wlh.jpg",
        "ablum": "<<改变自已>>",
        "age": 39,
        "sex": "男"
    },
    {
        "name": "王力宏",
        "photo": "./images/wlh.jpg",
        "ablum": "<<改变自已>>",
        "age": 39,
        "sex": "男"
    }
]

接下来就是在html页面中进行AJAX编程获取数据了（这里就不详细介绍执行过程了，网上书上一堆）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON</title>
    <style>
        table {
            width: 800px;
            border-collapse: collapse;
        }
        td {
            height: 40px;
            text-align: center;
            border: 1px solid #CCC;
        }
    </style>
</head>
<body>
    <table>

    </table>
    <div class="btn"><input type="button" value="获取数据"></div>
    <script>
        var btn = document.querySelector('.btn');

        btn.onclick = function () {

            var xhr = new XMLHttpRequest;

            xhr.open('get', 'stars.php');

            xhr.send(null);

            xhr.onreadystatechange = function () {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    result = JSON.parse(result);
                    console.log(result);
                    var html = '';
                    for(var i=0; i<result.length; i++) {
                        html += '<tr>';
                        html += '<td>' + result[i].name + '</td>';
                        html += '<td>' + result[i].age + '</td>';
                        html += '<td>' + result[i].sex + '</td>';
                        html += '<td>' + result[i].photo + '</td>';
                        html += '<td>' + result[i].ablum + '</td>';
                        html += '</tr>';
                    }
                    document.querySelector('table').innerHTML = html;
                }
            }
        }
    </script>
</body>
</html>

结果如下：
这里写图片描述

当然，能实现这些功能的前提是得给自己电脑配个服务器环境…然后通过自己创建的域名打开网页而不是本地打开，推荐使用wamp这个软件。

小船划向前端

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML文件、PHP文件、JSON文件之间通过AJAX编程简单传递数据

JSON是一种数据格式，不属于任何语言，因而它可在不同语言之间进行传递，但是JSON有简单值、对象、数组三种类型的值，而每个语言对对象和数组的表示语法都不相同，那如何实现JSON中的数据在不同语言之间传递呢。字符串在任何语言中的表示语法都是相同的（至少绝大多数吧…），都是用引号包裹起来的，因此可以将JSON转换成字符串。然后不同的语言有不同的JSON解析器函数，如JS中JSON.parse(st
复制链接

扫一扫

专栏目录