admin管理员组

文章数量:1794759

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

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

JSON是一种HTML style="color:#2aa0ea" target=_blank class=infotextkey>数据格式，不属于任何语言，因而它可在不同语言之间进行传递，但是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这个软件。

本文标签： 文件简单数据htmlPHP

版权声明：本文标题：HTML文件、PHP文件、JSON文件之间通过AJAX编程简单传递数据 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686748149a97931.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。