前言:
此时我们对“ajax解析多层json数据”都比较看重,你们都需要剖析一些“ajax解析多层json数据”的相关内容。那么小编在网络上搜集了一些对于“ajax解析多层json数据””的相关文章,希望看官们能喜欢,我们快快来学习一下吧!1,了解json, xml数据格式:
xml数据格式是利用标签对数据就行组装,标签必须成对出现,且必须以<?xml version="1.0" encoding="utf-8" ?>开头 但是因为标签必须成对出现导致文件体积大,标签数量太多,实在是影响传输效率,因此使用频率不高,下面是xml数据格式的例子
<?xml version="1.0" encoding="utf-8"?><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对象的组装方式,具有体积小,传输快的特点,这里我们拿常见的数据格式对象数组的形式来举例
[ { "title":"Js学习", "author":["张三","李四"] }, { "title":"ajax学习", "author":["王五","赵六"] }]2,Ajax如何对这俩种数据进行解析 首先弄清楚ajax使用步骤(4步,get,还是post 检测数据是什么,数据格式是什么,这要看后端人员给我们的接口文档,文档内会有详细的说明在,这里我也嫖了一份简单的接口文档供大家学习了解)
get方法:
var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //1,创建对象 并对IE6做兼容性处理 xhr.open("get", 'check.php?uname=' + 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("Microsoft.XMLHTTP"); } //1,创建对象 并对IE6做兼容性处理 xhr.open("post", 'check.php', true); //2,准备发送,true代表异步 //模拟地址栏请求,得到check.php页面的数据 xhr.setRequestHeader("content-Type", 'application/x-www-form-urlencoded'); var param = 'uname=' + 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("Content-Type:text/xml;");//这里设置响应头信息,保证浏览器可以把相应内容识别为xml文件类型 $arr = array(); $arr[0] = array("name"=>"三国演义","author"=>"罗贯中","desc"=>"一个杀伐纷争的年代"); $arr[1] = array("name"=>"水浒传","author"=>"施耐庵","desc"=>"108条好汉的故事"); $arr[2] = array("name"=>"西游记","author"=>"吴承恩","desc"=>"佛教与道教斗争"); $arr[3] = array("name"=>"红楼梦","author"=>"曹雪芹","desc"=>"一个封建王朝的缩影"); ?><?xml version="1.0" encoding="utf-8" ?><booklist> <?php foreach ($arr as $key => $value) { ?> <book> <name><?php echo $value['name'] ?></name> <author><?php echo $value['author'] ?></author> <desc><?php echo $value['desc'] ?></desc> </book> <?php } ?></booklist>
<script> window.onload = function() { var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.open('get', './server/getBooks.php', true); xhr.send(null); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { var result = xhr.responseXML; var books = result.getElementsByTagName("booklist")[0].getElementsByTagName('book'); var newHtml = ''; for (var i = 0; i < books.length; i++) { var itemBook = books[i]; var name = itemBook.getElementsByTagName('name')[0].textContent; var author = itemBook.getElementsByTagName('author')[0].textContent; var desc = itemBook.getElementsByTagName('desc')[0].textContent; var table = document.getElementsByTagName('table')[0]; // table.insertAdjacentHTML("beforeend", '<tr><td>' + name + '</td><td>' + author + '</td><td>' + desc + '</td></tr>') 第一种方法 var Html = '<tr><td>' + name + '</td><td>' + author + '</td><td>' + desc + '</td></tr>'; newHtml += Html; } table.innerHTML += newHtml; } } } }</script><body> <div> <table> <tr> <th>书名</th> <th>作者</th> <th>描述</th> </tr> </table> </div></body>
这样就将xml格式的数据渲染到页面上了
对json数据解析渲染
//getStudent.php<?php $arr = array(); $arr[0] = array("name"=>"张三","age"=>"19","sex"=>"男"); $arr[1] = array("name"=>"李四","age"=>"23","sex"=>"男"); $arr[2] = array("name"=>"王五","age"=>"30","sex"=>"女"); echo json_encode($arr); ?>
<script> //json数据格式的数据获取 window.onload = function() { var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.open('get', './server/getStudents.php', true); xhr.send(null); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { var result = xhr.responseText; var Html = ''; result = JSON.parse(result); //得到的是数组对象 var table = document.querySelector('table'); 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 += '<tr><td>' + name + '</td><td>' + sex + '</td><td>' + age + '</td></tr>' table.insertAdjacentHTML('beforeend', '<tr><td>' + name + '</td><td>' + sex + '</td><td>' + age + '</td></tr>'); //方法二 } // table.innerHTML += Html; 方法一:字符串连接 } } } }</script><body> <div> <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </table> </div></body>
这样就可以渲染到页面上去了
标签: #ajax解析多层json数据 #ajax前端怎么解析json #phpjson转xml #ajax怎么获取数组参数 #ajaxjsonasjx