Ajax--解析JSON数据与解析XML数据
一.Ajax解析JSON数据
nav.json(json数据)
[
{
"link":"http://www.jd.com",
"src":"images/nav_1.png",
"text":"京东超市"
},
{
"link":"http://www.taobao.com",
"src":"images/nav_2.png",
"text":"全球购"
},
{
"link":"http://www.mi.com",
"src":"images/nav_3.png",
"text":"服装城"
},
{
"link":"http://www.163.com",
"src":"images/nav_4.png",
"text":"京东生鲜"
} ]
nav_json.php (服务器)
<?php
/**
* Created by qinpeizhou.
* Date: 2017/11/10
* Time: 16:52
* Email : 1031219129@qq.com
*/
header('Content-Type:text/html;charset=utf-8;');
$jsonStr = file_get_contents('nav.json');
echo $jsonStr;
原生JavaScript进行Ajax的JSON解析：
nav_json_HTML_JSON.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.nav{
border: 1px solid #ddd;
}
.nav li {
float: left;
width: 200px;
text-align: center;
}
.nav li a{
text-decoration: none;
}
</style>
</head>
<body>
<button id="btn">无刷新请求</button>
<div class="nav">
<ul id="navIn">
<!--<li>
<a href="chaoshi.html">
<img src="data:images/nav_1.png" alt="">
<p>京东超市</p>
</a>
</li>
<li>
<a href="chaoshi.html">
<img src="data:images/nav_2.png" alt="">
<p>京东超市</p>
</a>
</li>
<li>
<a href="chaoshi.html">
<img src="data:images/nav_3.png" alt="">
<p>京东超市</p>
</a>
</li>
<li>
<a href="chaoshi.html">
<img src="data:images/nav_4.png" alt="">
<p>京东超市</p>
</a>
</li>-->
</ul>
</div>
</body>
</html>
<script>
/**
// 1.创建AJAX对象
// 2.链接服务器
// 3.发送请求
// 4.接受响应结果
* */ // 需求：点击按钮，获取数据并无刷新的添加到页面里
var btn = document.getElementById('btn');
var navIn = document.getElementById('navIn');
btn.onclick = function () {
// 1.创建小黄人
var xhr = new XMLHttpRequest();
// 2.小黄人去哪里
xhr.open('get','05nav_json.php',true);
// 3.小黄人出发了
xhr.send();
// 4.小黄人返回结果处理
xhr.onreadystatechange = function () {
if(xhr.status==200 && xhr.readyState == 4){
// 获取页面的响应文本
var res = xhr.responseText;
// 只能解析合法的JSON数据
res = JSON.parse(res);
console.log(res);
// 把数据拼接成节点并添加到页面
var htmlStr = '';
for (var i = 0; i < res.length; i++) {
htmlStr += " <li>" +
"<a href="+res[i].link+">" +
"<img src="+res[i].src+" alt=''> " +
"<p>"+res[i].text+"</p>" +
"</a><" +
"/li>"
}
navIn.innerHTML = htmlStr;
}
}
}
</script>
原生JavaScript进行Ajax的XML解析：
nav.xml
<?xml version="1.0" encoding="UTF-8" ?>
<array>
<item>
<link>http://www.jd.com</link>
<src>images/nav_1.png</src>
<text>京东超市</text>
</item>
<item>
<link>http://www.taobao.com</link>
<src>images/nav_2.png</src>
<text>全球购</text>
</item>
<item>
<link>http://www.mi.com</link>
<src>images/nav_3.png</src>
<text>服装城</text>
</item>
<item>
<link>http://www.163.com</link>
<src>images/nav_4.png</src>
<text>京东生鲜</text>
</item>
</array>
nav_XML.php
<?php
header('Content-Type:application/xml;charset=utf-8;'); $xmlStr = file_get_contents('nav.xml');
echo $xmlStr;
?>
nav_XML.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.nav {
border: 1px solid #ddd;
overflow: hidden;
}
.nav li{
float: left;
width: 100px;
text-align: center;
}
.nav li a{
text-decoration: none;
}
</style>
</head>
<body>
<button id="btn">无刷新请求</button>
<div class="nav">
<ul id="navIn"> </ul>
</div>
</body>
</html>
<script>
/**
* 1. 创建AJAX对象
* 2. 连接服务器
* 3. 发送请求
* 4. 接收响应结果
*/
// 需求：点击按钮，获取数据并无刷新的添加到页面里 var btn = document.getElementById('btn');
var navIn = document.getElementById('navIn'); btn.onclick = function () { // 1.创建小黄人
var xhr = new XMLHttpRequest();
// 2.小黄人去哪里
xhr.open('get','nav_XML.php',true);
// 3.小黄人出发了
xhr.send();
// 4.小黄人返回结果处理
xhr.onreadystatechange = function () {
if( xhr.status == 200 && xhr.readyState == 4 ){
/* 获取页面的响应文本 */
var res = xhr.responseXML;
// res = JSON.parse(res);
console.log(res.children[0].children);
var item = res.children[0].children;
/* 把数据拼接成节点，并添加到页面 */
var htmlStr = '';
for (var i = 0; i < item.length; i++) {
htmlStr += '<li>\n' +
' <a href="'+item[i].querySelector('link').innerHTML+'">\n' +
' <img src="'+item[i].querySelector('src').innerHTML+'" alt="">\n' +
' <p>'+item[i].querySelector('text').innerHTML+'</p>\n' +
' </a>\n' +
'</li>';
}
// console.log(htmlStr);
navIn.innerHTML = htmlStr;
}
} } </script>
Ajax--解析JSON数据与解析XML数据的更多相关文章
- 如何使用Google APIs和Google应用系统集成(7)----在里面JSON兑换XML数据处理，JSON数据包括违规XML数据规范：XML节点名称不支持号码Java解
笔者电话Google Calendar APIs的GetColors方法,其中(有关详细信息Google Calendar API已经Google API看到我的博文介绍的其余部分,目前,我们只取Go ...
- 【Flex】读取本地JSON，然后JSON数据转成XML数据
package utils { import flash.xml.XMLDocument; import flash.xml.XMLNode; import mx.rpc.xml.SimpleXMLE ...
- php解析json数组（循环输出数据）的实例
以快递100接口为例 返回的JSON数据 {"message":"ok","nu":"350116805826",&qu ...
- Jquery解析Json字符串,并且动态生成数据表格Table
//ajax获得后台传来的json字符串 $.post("UserInfo.ashx", function (data) { //假设data="{T1:[{User_I ...
- AJAX制作JSON格式的实时更新数据的方法
之前有写过这样的文章,但是出现了几个问题,第一,如果每秒都像数据库发送请求势必会造成服务器的压力过大,第二,如果使用JS的话,是不可以取得系统时间的,因为JS运行在客户端,所以只能取得客户端时间, 如 ...
- json数据相对于xml数据.
JSON is a valid subset of JavaScript, Python, and YAML JSON parsing is generally faster than XML par ...
- c#: 解析json， 转成xml， 简单方便
没看到.net framework中有这样的功能, 懒得到处找了, 索性花点时间自己写一个 /* * Created by SharpDevelop. * Date: 2013/6/24 * User ...
- C# JObject解析Json(多方法解析Json 二)
下载Newtonsoft.Json,添加引用 记得using Newtonsoft.Json.Linq; //用JObject解析 string json = "{\"offlin ...
- C#解析Json(多方法解析Json 一)
解析:{'id':'4028d80858053bed0158053ef7a50001','sl':0.0,'sfyfz':'0','zwjyzsbh':'1000001600000018'} 1.新建 ...
- 把txt格式数据制作成xml数据
txt格式数据: 代码: s1=""" <object> <name>{0}</name> <pose>Unspecifi ...
随机推荐
- 转：Linux 文件IO理解
源地址http://blog.csdn.net/lonelyrains/article/details/6604851 linux文件IO操作有两套大类的操作方式:不带缓存的文件IO操作,带缓存的文件 ...
- 让html里的js脚本延迟5秒运行
setTimeout( function(){ //add your code}, 5 * 1000 );//延迟5000毫米
- JS 日期比较
Js 日期比较方法 第一种方式 function compareDate(s1,s2){ return ((new Date(s1.replace(/-/g,"\/")))> ...
- iPadOS 更新日志 - 持续更新中
本文只是为了简单记录一下每个正式版本发布时间和更新内容,只有这个初衷,从2019年9月25日开始,将会持续更新. iPadOS 13.1 - 2019年9月25日 经全新命名的 iPadOS 是一款强 ...
- Android开发 Camera2开发_2_预览分辨率或拍照分辨率的计算
前言 不管在Camera1或者Camera2在适配不同手机/不同使用场景的情况下都需要计算摄像头里提供的分辨率列表中最合适的那一个分辨率.所以在需要大量机型适配的app,是不建议不经过计算直接自定义分 ...
- 3926: [Zjoi2015]诸神眷顾的幻想乡
传送门 一个广义后缀自动机模板. //Achen #include<algorithm> #include<iostream> #include<cstring> ...
- JS的第七种语言类型--symbol
今天浏览网页的时候发现,JS中有七种语言类型.我的内心???百度一下哪里来的第七种!! 好吧跟着来回顾一下JS的前6种undefined null boolean string numver obje ...
- Android根据联系人姓名首字符顺序读取通讯录
Android根据联系人姓名首字符顺序读取通讯录 版权声明:本文为Zhang Phil原创文章,欢迎转载!转载请注明出处:http://blog.csdn.net/zhangphil 本文给出了A ...
- c++ string 字符串
转载 http://www.renfei.org/blog/introduction-to-cpp-string.html 运算符重载 + 和 +=:连接字符串 =:字符串赋值 >.> ...
- JS 中 Tween 的使用
JavaScript Tween算法及缓动效果 Flash做动画时会用到Tween类,利用它可以做很多动画效果,例如缓动.弹簧等等.我这里要教大家的是怎么利用flash的Tween类的算法,来做j ...