Ajax

  • XML
  • JSON

后端返回前端的数据格式有以下两种：

XML

注：使用xml形式返回前段时，php头部应该添加以下代码：
header(“Content-type: text/xml; charset=utf-8”);
xml部分：

<?xml version="1.0" encoding="UTF-8"?>
	<persion>
		<name>张三</name>
		<age>18</age>
	</persion>

php部分：

<?php
header("Content-type: text/xml; charset=utf-8");
echo file_get_contents("04_AJAX_xml.xml");
?>

html部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("button").click(function(){
					$.ajax({
						type: "get",
						url: "04_ajax_xml.php",
						success: function(data) {
							// console.log(data);
							var name = data.querySelectorAll("name");
							var age = data.querySelectorAll("age");
							console.log(name[0].innerHTML);
							console.log(age[0].innerHTML);
							// var $data = data.responseXML;
							// console.log(typeof $data);
							
						},
						error: function() {
							alert("请求失败");
						}
					})
				})
				
			})
		</script>
	</head>
	<body>
		<button type="button">获取数据</button>
	</body>
</html>

JSON

html部分（此处引用的js是自己跟着视频封装的ajax方法）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/ajax_post_ask.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function() {
				var demo = document.getElementById("app");
				demo.onclick = function() {
					ajax({

						type: "get",

						url: "03_JSON.php",

						success: function(data) {
							// console.log(data.responseText);
							var str = data.responseText;
							// console.log(typeof str);
							var obj = JSON.parse(str);
							console.log(obj.name);
							console.log(obj.age);
						},
						error: function(msg) {
							alert("请求失败");
						}
					})

				}

			}
		</script>
	</head>
	<body>
		<button type="button" id="app">测试按钮</button>
	</body>
</html>

php部分：

<?php
echo file_get_contents("text.txt");
?>

txt文件部分：

{
	"name":"zs",
	"age":"18"
}

更多推荐

Ajax后端返回前端的数据格式