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 ...
随机推荐
- Python GUI文本编辑器
使用Python编写一个简单的文本编辑器,需要展示一个用户界面,功能包括打开.保存文本文件. 使用tkinter库来编写GUI. #简单GUI文本编辑器 from tkinter import * f ...
- adb命令总结
- Windows API 第16篇 GetLogicalDrivers 获取驱动器位掩码
函数原型:DWORD GetLogicalDrives(VOID);The GetLogicalDrives function retrieves a bitmask representing the ...
- C#墨攻IOC[转]
原文叫看<墨攻>理解IOC概念 2006年多部贺岁大片以让人应接不暇的频率纷至沓来,其中张之亮的<墨攻>算是比较出彩的一部,讲述了战国时期墨家人革离帮助梁 国反抗赵国侵略的个人 ...
- Gym - 102021E
Gym - 102021Ehttps://vjudge.net/problem/2109787/origin主要是一个处理精度的技巧,避免精度误差可以加eps,然后乘1e(小数点之后的位数). #in ...
- Css if hack条件语法
Css if hack条件语法 <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> ...
- 一些常见的synthesis attribute
Noprune A Verilog HDL synthesis attribute that prevents the Quartus II software from removing a regi ...
- 微信audio自动播放（ios播放问题）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- PAT甲级——A1064 Complete Binary Search Tree
A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...
- PAT甲级——A1038 Recover the Smallest Number
Given a collection of number segments, you are supposed to recover the smallest number from them. Fo ...