> 软件应用
ajax解析jso(怎么用ajax将jso的数据读取出来)
导语:如何用Ajax解析json,XML数据格式
1,了解json, xml数据格式:
xml数据格式是利用标签对数据就行组装,标签必须成对出现,且必须以<?xml version= encoding= ?>开头 但是因为标签必须成对出现导致文件体积大,标签数量太多,实在是影响传输效率,因此使用频率不高,下面是xml数据格式的例子
<?xml version= encoding=?><students><student><name>张三</name><age>30</age><sex>男</sex></student><student><name>李四</name><age>25</age><sex>男</sex></student><student><name>王五</name><age>27</age><sex>女</sex></student></students>
json数据格式他类似于js对象的组装方式,具有体积小,传输快的特点,这里我们拿常见的数据格式对象数组的形式来举例
[ { :, :[,] }, { :, :[,] }]
2,Ajax如何对这俩种数据进行解析
首先弄清楚ajax使用步骤(4步,get,还是post 检测数据是什么,数据格式是什么,这要看后端人员给我们的接口文档,文档内会有详细的说明在,这里我也嫖了一份简单的接口文档供大家学习了解)
get方法:
var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject(); } //1,创建对象 并对IE6做兼容性处理 xhr.open(, &39; + uname, true); //2,准备发送,true代表异步 //模拟地址栏请求,得到check.php页面的数据 xhr.send(null); //3,开始发送 xhr.onreadystatechange = function() {//4,回调函数 if (xhr.readyState == 4) { //xhr状态正常 if (xhr.status == 200) { //服务器状态正常 var result = xhr.responseText; console.log(result); } } };
post方法 :
var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject(); } //1,创建对象 并对IE6做兼容性处理 xhr.open(, &39;, true); //2,准备发送,true代表异步 //模拟地址栏请求,得到check.php页面的数据 xhr.setRequestHeader(, &39;); var param = &39; + uname; //注意uname一点都不能动,这是接口文档定义好的,服务器根据这个来判别用户输入是否合法 xhr.send(param); //3,开始发送 xhr.onreadystatechange = function() {//4,回调函数 if (xhr.readyState == 4) { //xhr状态正常 if (xhr.status == 200) { //服务器状态正常 var result = xhr.responseText; console.log(result); } } };
3,Ajax对xml, json数据解析
对xml数据解析渲染
//getBooks.php<?php header();//这里设置响应头信息,保证浏览器可以把相应内容识别为xml文件类型 $arr = array(); $arr[0] = array(=>,=>,=>); $arr[1] = array(=>,=>,=>); $arr[2] = array(=>,=>,=>); $arr[3] = array(=>,=>,=>); ?><?xml version= encoding= ?><booklist> <?php foreach ($arr as $key => $value) { ?> <book> <name><?php echo $value[&39;] ?></name> <author><?php echo $value[&39;] ?></author> <desc><?php echo $value[&39;] ?></desc> </book> <?php } ?></booklist>
<script> window.onload = function() { var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject(); } xhr.open(&39;, &39;, true); xhr.send(null); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { var result = xhr.responseXML; var books = result.getElementsByTagName()[0].getElementsByTagName(&39;); var newHtml = &39;; for (var i = 0; i < books.length; i++) { var itemBook = books[i]; var name = itemBook.getElementsByTagName(&39;)[0].textContent; var author = itemBook.getElementsByTagName(&39;)[0].textContent; var desc = itemBook.getElementsByTagName(&39;)[0].textContent; var table = document.getElementsByTagName(&39;)[0]; // table.insertAdjacentHTML(, &39; + name + &39; + author + &39; + desc + &39;) 第一种方法 var Html = &39; + name + &39; + author + &39; + desc + &39;; newHtml += Html; } table.innerHTML += newHtml; } } } }</script> <div> <table> <tr> <th>书名</th> <th>作者</th> <th>描述</th> </tr> </table> </div>
这样就将xml格式的数据渲染到页面上了
对json数据解析渲染//getStudent.php<?php $arr = array(); $arr[0] = array(=>,=>,=>); $arr[1] = array(=>,=>,=>); $arr[2] = array(=>,=>,=>); echo json_encode($arr); ?>
<script> //json数据格式的数据获取 window.onload = function() { var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject(); } xhr.open(&39;, &39;, true); xhr.send(null); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { var result = xhr.responseText; var Html = &39;; result = JSON.parse(result); //得到的是数组对象 var table = document.querySelector(&39;); for (var i = 0, l = result.length; i < l; i++) { var item = result[i]; var name = item.name; var sex = item.sex; var age = item.age; // Html += &39; + name + &39; + sex + &39; + age + &39; table.insertAdjacentHTML(&39;, &39; + name + &39; + sex + &39; + age + &39;); //方法二 } // table.innerHTML += Html; 方法一:字符串连接 } } } }</script> <div> <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </table> </div>
这样就可以渲染到页面上去了
免责声明:本站部份内容由优秀作者和原创用户编辑投稿,本站仅提供存储服务,不拥有所有权,不承担法律责任。若涉嫌侵权/违法的,请反馈,一经查实立刻删除内容。本文内容由快快网络小舻创作整理编辑!