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

来源：互联网发布：汽修厂管理接待软件编辑：程序博客网时间：2024/05/21 22:35

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 0