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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wayne0902/article/details/51788620

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这个软件。

展开阅读全文

没有更多推荐了,返回首页