让我们来详细讲解一下JQuery Ajax学习实例，这里我会给出两个示例说明，为了方便描述，我会分成步骤来讲解。
基本概念
在开始之前，我们需要先理解一些基本概念。
AJAX
AJAX 是一种与服务器交换数据并更新部分网页而不重载整个页面的技术。AJAX 不是新技术，它是使用了已有的技术，是一种将客户端脚本和服务器端脚本进行异步通信的技术。
JSON
JSON 全称为 JavaScript 对象表示法（JavaScript Object Notation），它是一种轻量级的数据交换格式。JSON 由 JavaScript 编写，但不依赖于 JavaScript。
XML
XML 是一种数据格式。它是一种标记语言，可以被用来存储和传输数据。XML 与 HTML 很相似，但是它的标签不是固定的，而是可以由开发者自定义。在传输数据时，XML 数据必须经过格式化。
RESTful
RESTful 是一种设计风格，它是表述性状态转移（Representational State Transfer）的缩写。它是一种针对 Web 应用的设计风格，它可以更加有效地利用 HTTP 协议中的方法来实现对资源的定义、传输和状态转换。
示例一：获取 JSON 数据
在这个示例中，我们将会向服务器发出请求，并获取一个 JSON 格式的响应。这里我们将使用 httpbin.org 提供的 API。
第一步：编写 HTML 代码
首先，我们需要为我们的示例编写一个 HTML 页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX 实例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$.ajax({
url: "https://httpbin.org/get",
success: function(result) {
$("#div1").html(result.origin);
}
});
});
});
</script>
</head>
<body>
<button id="btn1">获取数据</button>
<div id="div1"></div>
</body>
</html>
第二步：解释代码
接下来，我们将逐一解释代码。首先，我们引入了 jQuery 库：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
然后，在 $(document).ready() 函数中，我们使用了 $("#btn1").click() 事件来监听按钮的点击事件。当我们点击按钮时，Ajax 将会向 https://httpbin.org/get 发送一个 GET 请求：
$.ajax({
url: "https://httpbin.org/get",
success: function(result) {
$("#div1").html(result.origin);
}
});
注意，在请求成功时，我们使用了 $("#div1").html(result.origin) 将返回的数据显示在 HTML 页面的某个位置上。
第三步：运行代码
好了，现在我们刷新浏览器，然后点击“获取数据”按钮。你应该会看到你的 IP 地址在页面上显示出来了。
示例二：获取 XML 数据
在这个示例中，我们将会向服务器发出请求，并获取一个 XML 格式的响应。这里我们将使用 httpbin.org 提供的 API。
第一步：编写 HTML 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX 实例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btn2").click(function() {
$.ajax({
type: "GET",
url: "https://httpbin.org/xml",
dataType: "xml",
success: function(xml) {
var xmlDoc = $.parseXML(xml),
$xml = $(xmlDoc),
$title = $xml.find("title");
$("#div2").html($title.text());
},
error: function(xhr, status, error) {
console.log(xhr.responseText);
}
});
});
});
</script>
</head>
<body>
<button id="btn2">获取 XML 数据</button>
<div id="div2"></div>
</body>
</html>
第二步：解释代码
第一行代码同样是引入了 jQuery 库：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
然后，我们使用了 $("#btn2").click() 事件来监听按钮的点击事件。当我们点击按钮时，Ajax 将会向 https://httpbin.org/xml 发送一个 GET 请求，并且使用 dataType: "xml" 参数来告诉 Ajax 我们希望得到的是一个 XML 格式的响应。
$("#btn2").click(function() {
$.ajax({
type: "GET",
url: "https://httpbin.org/xml",
dataType: "xml",
success: function(xml) {
var xmlDoc = $.parseXML(xml),
$xml = $(xmlDoc),
$title = $xml.find("title");
$("#div2").html($title.text());
},
error: function(xhr, status, error) {
console.log(xhr.responseText);
}
});
});
在请求成功时，我们使用了 $.parseXML(xml) 来将返回的 XML 数据转换为 XML DOM 对象，然后使用 $xml.find("title") 来查找 XML 中的 title 元素，并使用 $title.text() 来获取它的文本内容。最后，我们使用 $("#div2").html($title.text()) 将结果显示在页面上。
如果请求失败，我们使用 console.log(xhr.responseText) 将错误信息打印到控制台上。
第三步：运行代码
现在，我们刷新浏览器并点击“获取 XML 数据”按钮。你应该会在页面上看到一段 XML 代码，其中包含了一个 title 元素。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Jquery Ajax学习实例 向页面发出请求，返回XML格式数据 - Python技术站
微信扫一扫 
支付宝扫一扫 