2019-08-23 ajax ， xml ，json
2019-08-23 本文已影响0人
棘菀
XML
可扩展的标记语言
php执行结果有中文 必须在php闻不见顶部设置
header("content type:text/html; charset=utf-8")
如果php中需要返回XML数据 也必须在php顶部设置
header("Content-type:text/html; Charset=utf-8");
php获取xml数据
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="ajax封装.js"></script>
</head>
<body>
<button>发送请求</button>
<script>
window.onload = function(ev) {
var oBtn = document.querySelector('button');
oBtn.onclick = function(ev1) {
ajax({
type: "get",
url: "11-ajax.php",
data: {
userName: "xml"
},
success: function(xhr) {
var res = xhr.responseXML
console.log(res.querySelector("name").innerHTML)
console.log(res.querySelector("age").innerHTML)
},
timeout: 3000,
error: function(xhr) {
console.log(xhr.status)
}
})
}
}
/*header('Content-type: text/xml'); 获取不到xml文件的。。。。修改*/
</script>
</body>
</html>
php部分
<?php
header("Content-type:text/xml; Charset=utf-8");
//获取文件
$file = file_get_contents("11-ajax.xml");
echo $file;
?>
<?xml version="1.0" encoding="UTF-8" ?>
<dog>
//标签随意起名
<name>临安将</name>
<age>38</age>
</dog>
XML练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
border: 1px solid #000;
margin: 50px auto;
text-align: center;
background-color: skyblue;
}
img {
width: 200px;
height: 200px;
display: block;
margin: 10px auto 10px;
border: 1px solid #000;
}
p {
text-align: center;
background: pink;
}
</style>
<!---->
<script src="ajax封装.js"></script>
<script src="../jquery-3.4.1.js"></script>
<script>
$(function(ev) {
$("button").click(function(ev1) {
var self = this;
ajax({
type: "post",
url: "xml-test.php",
data: {
"name": $(this).attr("name")
},
timeout: 3000,
success: function(xhr) {
var name = $(self).prop("name");
var res = xhr.responseXML;
var title = res.querySelector(name + ">title");
var image = res.querySelector(name + ">image");
var deg = res.querySelector(name + ">deg");
$("#title").html(title.innerHTML)
$("img").attr("src", image.innerHTML)
$("#deg").html(deg.innerHTML)
},
error: function(xhr) {
alert(xhr.status)
}
})
})
})
</script>
</head>
<body>
</body>
<div>
<p id="title"> 商品标题名称</p>
<img src="" alt="">
<p id="deg">商品描述信息</p>
<button name="nz">女装</button>
<button name="bb">包包</button>
<button name="tx">拖鞋</button>
</div>
</html>
----优化了字符串中可能存在 " | " 分隔符的问题
JSON
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="ajax封装.js"></script>
</head>
<body>
<button>发送请求</button>
<script>
window.onload = function(ev) {
var oBtn = document.querySelector('button');
oBtn.onclick = function(ev1) {
ajax({
type: "get",
url: "12-ajax-json.php",
data: {
userName: "xml"
},
success: function(xhr) {
var str = xhr.responseText;
var obj = JSON.parse(str);
console.log(obj.name);
console.log(obj.age);
/*在第八按本的ie中 我们不可以使用js原生的JSON.parse方法 但是可以使用json2.js这个框架来写 去github上下载就行*/
},
timeout: 3000,
error: function(xhr) {
console.log(xhr.status)
}
})
}
}
/*header('Content-type: text/xml'); 获取不到xml文件的。。。。修改*/
</script>
</body>
</html>
