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命令快速手记 — 让手指跟上思考的速度（四）
pm2 list:列出pm2方式启动的所有程序 pm2 monit:显示每个应用程序的CPU和内存占用情况 scp:远程复制和本地上传,适用于本地ssh登录到远程服务器 scp root@10.10. ...
- java扫描某个包下的所有java类并加载
最近在学习java的反射和注解,实际情景中需要扫描某个包下的所有java类,然后使用类加载器加载类. 基本思路,获得程序的路径扫描src下某个包内的子包和java类,实现也比较简单. 运行环境:win ...
- NYOJ--311（完全背包）
题目:http://acm.nyist.net/JudgeOnline/problem.php?pid=311 分析:这里就是一个完全背包,需要注意的就是初始化和最后的输出情况 dp[j ...
- 搭建一个Semantic-ui项目
一.进入到项目目录 npm init 二.安装semantic-ui npm install semantic-ui --save 三.编译输出semantic-ui cd ./semantic g ...
- js实现事件监听与阻止监听传播
监听事件: 使用attachEvent(用于IE)和addEventListener(用于谷歌.火狐)时则可以实现多个事件处理函数的调用 1.下面都是dom对象的方法,可以实现一种事件绑定多个事件处理 ...
- Istio流量管理实践之(3): 基于Istio实现流量对比分析
流量镜像 流量镜像,也称为影子流量,流量镜像提供一种尽可能低的风险为生产带来变化的强大功能.镜像会将实时流量的副本发送到镜像服务.镜像流量发生在主服务的关键请求路径之外. 在非生产或者测试环境中,尝试 ...
- day72作业
目录 models模型类 路由配置 视图配置 序列化组件配置 基于ModelSerializer类,完成Car资源的单查,群查,单增接口 序列化:显示车名,车的颜色,车的价格,车的海报,车的品牌 反序 ...
- 记一次server 2008 R2的按装过程
项目上一直在用的dell务器在去年年底突然出现系统过期,导致c盘的东西全部丢失.我们用激活工具激活,还是没能找回丢失的东西. 为了装这个系统,跟同事一起折腾了好些次,最后发现安装服务器的时候有个磁盘阵 ...
- Pycharm中运行Python代码的几种方式
在pycharm中的Python代码运行会出现各种奇葩的问题,比如,密码输入时不显示或没有提示,给我们带来一些麻烦,下面介绍几种代码运行的几种方式: 一.直接运行(Run按钮或者快捷键shift+F1 ...
- 约束布局ConstraintLayout加快布局速度
Android Studio2.2更新布局设计器,同时,引人了约束布局ConstraintLayout. 简单来说,可以把它看做是相对布局的升级版本,但是区别与相对布局更加强调约束.何为约束,即控件之 ...