Ajax XML 和 JSON 的使用
Posted 欣仔走过痕迹
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax XML 和 JSON 的使用相关的知识，希望对你有一定的参考价值。
ajax切换明星
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="lib/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.thumbnail {
width: auto;
display: inline-block;
}
</style>
</head>
<body>
<div class="container">
<div class="panel panel-info">
<div class="panel-heading">
<h2 class="">明星数据展示</h2>
</div>
<div class="panel-body">
<div class="jumbotron">
<h1>宋慧乔</h1>
<a href="#" class="thumbnail">
<img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2602109396,2877482886&fm=58" alt="...">
</a>
<p>美美哒美美哒美美哒美美哒美美哒美美哒美美哒美美哒美美哒美美哒美美哒美美哒美美哒美美哒美美哒</p>
</div>
</div>
<div class="panel-footer">
<input class='btn btn-info btn-lg' type="button" value='周林林'>
<input class='btn btn-info btn-lg' type="button" value='彭林'>
<input class='btn btn-info btn-lg' type="button" value='林立群'>
<input class='btn btn-info btn-lg' type="button" value='西兰花'>
</div>
</div>
</div>
</body>
</html>
<!-- jQuery (necessary for Bootstrap's javascript plugins) -->
<script src="lib/js/jquery-1.12.4.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="lib/js/bootstrap.min.js"></script>
<!-- 自己的js代码 -->
<script>
// $(function () {
// // 绑定点击事件
// $('input').click(function(){
// // 更换 姓名
// $('h1').html($(this).val());
// //1.创建异步对象
// var xhr = new XMLHttpRequest();
// //2.设置请求行
// xhr.open('get','getStar.php?name='+$(this).val());
// //3.设置请求头(get请求可以省略)
// //4.注册状态改变事件
// xhr.onreadystatechange = function(){
// //4.1判断状态&请求是否成功并使用数据
// if(xhr.readyState==4&&xhr.status==200){
// console.log(xhr.responseText);
// // 修改对应的 dom元素的 内容
// // $('img').attr('src',xhr.responseText);
// // 切割数据
// var result = xhr.responseText.split('||||');
// console.log(result);
// // 分别设置给 img p
// $('img').attr('src',result[0]);
// $('p').html(result[1]);
// }
// }
// //5.发送请求
// xhr.send(null);
// })
// })
$(function() {
$('input').on('click',function() {
$('h1').html($(this).val());
var xhr = new XMLHttpRequest();
xhr.open('get','getStar.php?name='+$(this).val());
xhr.onreadystatechange = function() {
if(xhr.readyState==4&&xhr.status ==200){
console.log(xhr.responseText);
$('img').attr('src',xhr.responseText);
var result = xhr.responseText.split('||||');
console.log(result);
$('img').attr('src',result[0]);
$('p').html(result[1]);
}
}
xhr.send(null);
})
php部分
<?php
// 接收用户数据
$starName = $_GET['name'];
// 准备图片的版本
// 假数据
$personArr = array(
'周林林'=>array('icon'=>'img/zll.jpg','info'=>'叫兽->骚粉色'),
'彭林'=>array('icon'=>'img/pl.png','info'=>'原谅色,约跑'),
'林立群'=>array('icon'=>'img/llq.jpg','info'=>"嘿嘿嘿->程序员到卖烧烤,到底经历了什么"),
'西兰花'=>array('icon'=>'img/westblueflower.png','info'=>'西兰花炒蛋好好吃, oh-yeah')
);
// 查询数据
$someOne = $personArr[$starName];
// 返回结果
// 路径
echo $someOne['icon'];
// 额外的返回一些 用来切割的内容
echo '||||';
// 返回信息
echo $someOne['info'];
?>
服务器返回XML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<h2>请求xml文件</h2>
<input type="button" value='ajax获取XML文件'>
<h3></h3>
</body>
</html>
<script>
// 点击 请求xml
document.querySelector('input').onclick = function () {
//1.创建异步对象
var xhr = new XMLHttpRequest();
//2.设置请求行
xhr.open('post', 'backXML.php');
//3.设置请求头(get请求可以省略)
//4.注册状态改变事件
xhr.onreadystatechange = function () {
//4.1判断状态&请求是否成功并使用数据
if (xhr.readyState == 4 && xhr.status == 200) {
// 返回的是 XML 通过responseText 只能够获取到 字符串
console.log(xhr.responseText);
// 如果返回的是 xml 使用responseXML来获取
console.log(xhr.responseXML);
// 页面中默认的文档对象
console.log(document);
// 解析 通过responseXML 这个 文档对象 来解析
console.log(xhr.responseXML.querySelector('name').innerHTML);
console.log(xhr.responseXML.querySelector('age').innerHTML);
console.log(xhr.responseXML.querySelector('skill').innerHTML);
// 获取信息
var name = xhr.responseXML.querySelector('name').innerHTML;
var age = xhr.responseXML.querySelector('age').innerHTML;
var skill = xhr.responseXML.querySelector('skill').innerHTML;
// 设置给dom元素
document.querySelector('h3').innerHTML = name+'--'+age+'--'+skill;
}
}
//5.发送请求
xhr.send(null);
}
</script>
XML部分
<?xml version="1.0" encoding="UTF-8"?>
<root>
<name>周林林</name>
<age>18</age>
<skill>唱歌</skill>
</root>
PHP部分
<?php
// 告诉浏览器 返回的是 xml 编码格式是 utf-8
header('content-type:text/xml;charset=utf-8');
// 接收发送过来的数据
// 读取 xml
// =>哪个分类中 文件分类中找
// 参数1 文件的路径名
$xmlString = file_get_contents('data/person.xml');
// 返回读取的 xml
echo $xmlString;
?>
XML获取LOL英雄数据，并解析
<script src="jquery.min-1.72.js"></script>
</head>
<body>
<h2>获取XML英雄数据 并解析</h2>
<input type="button" value = "获取XML英雄数据_ajax">
</body>
</html>
<script>
$(function() {
$("input").on("click",function() {
var xhr = new XMLHttpRequest();
xhr.open('get','getHeros.php');
xhr.onreadystatechange = function() {
if(xhr.readyState==4&&xhr.status==200) {
console.log(xhr.responseXML);
var allHero = xhr.responseXML.querySelectorAll('hero');
console.log(allHero);
var ulDom = $("<ul></ul>");
$(allHero).each(function(i,ele) {
// var currentHero = allHero[i];
// var icon = currentHero.querySelector('icon').innerHTML;
// var name = currentHero.querySelector('name').innerHTML;
// console.log(icon+'||'+name);
// console.log(ele);
var icon = ele.querySelector('icon').innerHTML;
var name = ele.querySelector('name').innerHTML;
console.log(icon+'||'+name);
var liDom = $("<li></li>");
liDom.html("<img src='"+icon+"'>--<span>"+name+"</span>");
ulDom.prepend(liDom);
})
$("body").append(ulDom);
}
}
xhr.send(null);
})
})
</script>
<?php
header('content-type:text/xml;charset=utf-8');
$xmlString = file_get_contents('data/person.xml');
echo $xmlString;
?>
查询城市天气
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min-1.72.js"></script>
</head>
<body>
<h2>天气预报</h2>
<input type="text" placeholder="查询的城市">
<input type="button" value='查询'>
<h3></h3>
</body>
</html>
<script>
$(function() {
$("input[type=button]").on("click",function() {
var xhr = new XMLHttpRequest();
xhr.open('get','http://wthrcdn.etouch.cn/WeatherApi?city='+document.querySelector('input[type=text]').value);
xhr.onreadystatechange = function() {
if(xhr.readyState == 4&&xhr.status==200) {
console.log(xhr.responseXML);
var city = xhr.responseXML.querySelector('city').innerHTML;
var wendu = xhr.responseXML.querySelector('wendu').innerHTML;
var shidu = xhr.responseXML.querySelector('shidu').innerHTML;
document.querySelector('h3').innerHTML = city+'||'+wendu+'度||湿度'+shidu;
}
}
xhr.send(null);
})
})
</script>
JSON的基本使用
<body>
<h2>JSON基本使用</h2>
</body>
</html>
<script>
/*
1.JSON是一种数据的格式
2.JSON跟编程语言没有关系
3.JSON的载体是字符串
4.基本上所有的编程语言都支持JSON
5. 语法简洁 基本上所有的编程语言 都提供了对应的方法 来解析JSON
6. JSON格式的字符串 转化完毕之后 会变成 数组 对象
*/
// JSON的写法 -- 用来表示对象
// 对象使用 {}
// 属性名 必须使用 "" 包裹
// 属性值 必须使用 "" 包裹 如果属性值是数值 可以不使用双引号
var JSONObject = '{"name":"刘亦菲","skill":"失忆"}';
console.log(JSONObject);
// 转化为 对应的 对象(数组)
var obj = JSON.parse(JSONObject);
console.log(obj);
console.log(obj.name+'|'+obj.skill);
// JSON的写法 -- 用来表示数组 [] 中括号即可
var JSONArr = '["绿色的花菜","大蒜","大葱","番茄","圣女果"]';
console.log(JSONArr);
// 转化为 对应的 数组(对象)
var arr = JSON.parse(JSONArr);
console.log(arr);
console.log(arr[2]);
// JSON的写法 -- 对象数组
var JSONObjArr = '{"name":"彭林","skill":"约跑","runfriends":["周林林","林立群","飞哥"]}';
console.log(JSONObjArr);
// 转化为对应的 对象 数组
var result = JSON.parse(JSONObjArr);
console.log(result);
console.log(result.runfriends[1]);
// 错误 总结
// JSON的载体是 ==> 字符串
var JSONString = '{"name":"jack"}';
// 属性名 属性值 必须使用 双引号包裹
var JSONString2 = "{\"name\":\"jack\"}";
// 对象 键值对 之间使用 , ;
</script>
通过ajax获取JSON数据
<body>
<input type="button" value='获取JSON格式的数据'>
</body>
</html>
<script>
// 点击时候获取
document.querySelector('input').onclick = function () {
//1.创建异步对象
var xhr = new XMLHttpRequest();
//2.设置请求行
xhr.open('post', 'backJSON.php');
//3.设置请求头(get请求可以省略)
//4.注册状态改变事件
xhr.onreadystatechange = function () {
//4.1判断状态&请求是否成功并使用数据
if (xhr.readyState == 4 && xhr.status == 200) {
// JSON的载体是字符串 用responseText 即可获取
console.log(xhr.responseText);
// 转化为 对应的 对象(数组)
var arr = JSON.parse(xhr.responseText); //是对象，对象"."属性，是数组 遍历数组
console.log(arr);
// 遍历打印
for(var i =0;i<arr.length;i++){
var currentObj = arr[i];
console.log('姓名:'+currentObj.name+' 技能:'+currentObj.skill);
}
}
}
//5.发送请求
xhr.send(null);
}
</script>
php部分
<?php
// JSON也要设置一段内容 (可选)
// 告诉浏览器 返回的是 JSON格式的数据 编码是 utf-8
header('content-type:application/json;charset=utf-8');
// 读取JSON文件
$jsonString = file_get_contents('data/stars.json');
// 返回读取的内容
echo $jsonString;
?>
JSON部分
[{
"name":"卢本伟",
"skill":"斗地主赌怪"
},{
"name":"吴彦祖",
"skill":"帅"
},{
"name":"张国荣",
"skill":"霸王别姬"
},{
"name":"林俊杰",
"skill":"小酒窝--美美哒"
}]
获取LOL英雄列表
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
body {
background-color: yellowgreen;
}
.show-box{
width: 666px;
margin: 20px auto;
/* height: 666px; */
min-height: 66px;
border-radius: 20px;
border: 1px solid #000;
box-shadow: 0 0 30px skyblue;
}
td{
border: 1px solid #000;
border-radius: 10px;
}
</style>
</head>
<body>
<h2>lol数据解析</h2>
<input type="button" value='获取LOL JSON数据'>
<!-- 展示数据的容器 -->
<div class="show-box"></div>
</body>
</html>
<script>
/*
易错点
1.onreadystatechange 多次 添加判断
2.拼接字符串时 使用=号
3. innerHTML(html) js jQ弄混了
*/
// 注册事件
document.querySelector('input').onclick = function () {
//1.创建异步对象
var xhr = new XMLHttpRequest();
//2.设置请求行
xhr.open('get', 'backHero.php');
//3.设置请求头(get请求可以省略)
//4.注册状态改变事件
xhr.onreadystatechange = function () {
//4.1判断状态&请求是否成功并使用数据
if(xhr.readyState==4&&xhr.status==200){
// console.log(xhr.responseText);
// 解析JSON数据
var heroArr = JSON.parse(xhr.responseText);
console.log(heroArr);
// 准备字符串
var html = '';
// table - 开头
html='<table>';
// 生成tr
for(var i =0;i<heroArr.length;i++){
// 当前循环的对象
var currentHero = heroArr[i];
// tr -开头
html+='<tr>';
// td
html+='<td>'+currentHero.champion_name+'</td>';
html+='<td>'+currentHero.champion_title+'</td>';
html+='<td><img src="'+currentHero.champion_icon+'"></td>';
// tr -结尾
html+='</tr>';
}
// table - 结尾
html+='</table>';
// 拼接好了 table
console.log(html);
// 设置到页面上
document.querySelector('.show-box').innerHTML = html;
// document.querySelector('.show-box').innerHTML(html);
}
}
//5.发送请求
xhr.send(null);
}
</script>
<!-- // 注册点击事件
//1.创建异步对象
//2.设置请求行
//3.设置请求头(get请求可以省略)
//4.注册状态改变事件
//4.1判断状态&请求是否成功并使用数据
// 解析JSON数据
// 准备拼接字符串
// table - 开头
// 循环生成tr
// 获取当前循环的对象
// tr -开头
// td -开头跟结尾
// tr -结尾
// table - 结尾
// 设置到页面上
//5.发送请求 -->
PHP部分
<?php
// 设置返回的是JSON
header('content-type:application/json;charset=utf-8');
// 读取JSON文件
// 返回读取的数据
echo file_get_contents('./data/info.json');
?>
京东ajax搜索联想JSON数据
大部分没有区别
// 注册事件
document.querySelector('input').onclick = function () {
//1.创建异步对象
var xhr = new XMLHttpRequest();
//2.设置请求行
xhr.open('get', 'backHero.php');
//3.设置请求头(get请求可以省略)
//4.注册状态改变事件
xhr.onreadystatechange = function () {
//4.1判断状态&请求是否成功并使用数据
if(xhr.readyState==4&&xhr.status==200){
var result = JSON.parse(xhr.responseText);
console.log(result);
var html = '<table>';
$(result).each(function(i,ele) {
html += '<tr>';
html += '<td>'+ele.key+'</td>';
html += '<td>'+ele.qre+'</td>';
html += '</tr>';
})
html += '</table>';
$('div').html(html);
}
}
//5.发送请求
xhr.send(null);
}
[{
"pcif": [{
"iftp": "3",
"shq": "iphone",
"sho": 1,
"ico": "",
"prp": "http://img30.360buyimg.com/cms/jfs/t21964/115/1772972159/2476/81480544/5b33886aN45813a43.png",
"prt": "& Apple产品京东自营旗舰店",
"pru": "https://mall.jd.com/index-1000000127.html"
}]
}, {
"key": "iphone",
"qre": "897048"
}, {
"key": "iphone 11",
"qre": "887590"
}, {
"key": "iphonex",
"qre": "884674"
}, {
"key": "iphonexr",
"qre": "884955"
}, {
"key": "iphone se",
"qre": "697715"
}, {
"key": "iphonexs",
"qre": "884604"
}, {
"key": "iphone8",
"qre": "885942"
}, {
"key": "iphone 11 pro",
"qre": "885250"
}, {
"key": "iphonexsmax",
"qre": "884524"
}, {
"key": "iphone7",
"qre": "886399"
}, {
"key": "iphone膜",
"qre": "867206"
}, {
"key": "iphone8p",
"qre": "1769595"
}, {
"key": "iphone7手机膜",
"qre": "528587"
}, {
"version": "V00--11s0,38s0,96s0"
}]
ajax JSON综合 LOL英雄详细数据
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="lib/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
html,
body {
height: 100%;
}
.lol-panel {
height: 100%;
display: flex;
flex-direction: column;
}
img {
width: 200px;
height: 200px;
}
.col-xs-4 {
text-align: center;
}
.lol-panel .panel-body {
/* height: 400px; */
flex: 1;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="lol-panel panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">lol_英雄_基础版本</h3>
</div>
<div class="panel-body">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<a href="javascript:void(0)" name='' class="thumbnail">
<img src="./api/images/1480473717181.png" alt="...">
<span>青钢影-卡蜜尔</span>
</a>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<input class='btn btn-info btn-lg getData' type="button" value='加载数据'>
<input class='heroNum' type="text" placeholder="请输入英雄的个数">
</div>
</div>
<!-- 模态框 -->
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">模板页</h4>
</div>
<div class="modal-body">
<div class="jumbotron">
<h1><span>青钢影</span>--<span class="label label-default">卡蜜尔</span></h1>
<img src="./api/images/1480473717181.png" alt="..." class="img-thumbnail">
<p>
tags:战士, 近战 </p>
<p>
卡蜜尔是一位优雅的特工精英，也是一台精密的人形兵器。 </p>
<a class="btn btn-primary btn-lg" href="#" role="button">详细攻略</a>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</body>
</html>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="lib/js/jquery-1.12.4.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="lib/js/bootstrap.min.js"></script>
<script>
// 需求1
// 点击 getData
// 获取 heroNum 的value
$(function () {
// 获取英雄列表
$('.getData').click(function () {
//1.创建异步对象
var xhr = new XMLHttpRequest();
//2.设置请求行
xhr.open('get', './api/HeroInfo_List_get.php?num=' + $('.heroNum').val());
//3.设置请求头(get请求可以省略)
//4.注册状态改变事件
xhr.onreadystatechange = function () {
//4.1判断状态&请求是否成功并使用数据
if (xhr.readyState == 4 && xhr.status == 200) {
// 解析数据
var dataObj = JSON.parse(xhr.responseText);
// 循环生成对应的结构
// dataObj.data 数据在data这个数组中
for (var i = 0; i < dataObj.data.length; i++) {
// 克隆结构
var $cloneCol = $('.col-xs-4').first().clone();
// 更改内容
$cloneCol.find('img').attr('src', dataObj.data[i].champion_icon);
$cloneCol.find('span').html(dataObj.data[i].champion_name);
// 添加到页面上
// appendTo 这个方法是jQuery 参数可以写 jQuery对象 也可以写 选择器
$cloneCol.appendTo($('.row'));
// $cloneCol.appendTo('.row');
}
}
}
//5.发送请求
xhr.send(null);
})
// 为row中的 a标签绑定点击事件
// 因为a标签是动态生成的 为了一劳永逸 直接绑定给 row 指定由 a触发
$('.row').on('click', 'a', function () {
// console.log('你点我了哦');
//1.创建异步对象
var xhr = new XMLHttpRequest();
//2.设置请求行
xhr.open('post', './api/HeroInfo_details_post.php');
//3.设置请求头(get请求可以省略)
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//4.注册状态改变事件
xhr.onreadystatechange = function () {
//4.1判断状态&请求是否成功并使用数据
if(xhr.readyState==4&&xhr.status==200){
// console.log(xhr.responseText);
// 解析数据
var dataObj = JSON.parse(xhr.responseText);
console.log(dataObj);
// 修改内容
// 外号
$('.jumbotron').find('span').first().html(dataObj.data.champion_title);
// 名字
$('.jumbotron').find('span').last().html(dataObj.data.champion_name);
// 图片
$('.jumbotron').find('img').attr('src',dataObj.data.champion_icon);
// 位置
$('.jumbotron').find('p').first().html(dataObj.data.champion_tags);
// 个性签名
$('.jumbotron').find('p').last().html(dataObj.data.champion_info);
// a标签的href
$('.jumbotron').find('a').attr('href',dataObj.data.champion_url);
// 弹出模态框
$('.modal').modal('show');
}
}
//5.发送请求
xhr.send('name='+$(this).find('span').html());
})
})
</script>
以上是关于Ajax XML 和 JSON 的使用的主要内容，如果未能解决你的问题，请参考以下文章