下面我详细讲解一下“AJAX简单测试代码实例”的完整攻略。
AJAX简单测试代码实例
AJAX概述
AJAX(Asynchronous JavaScript And XML)即异步的JavaScript与XML技术。它允许web页面异步地更新部分内容,从而避免了页面全部刷新,提升了用户体验。
AJAX原理
AJAX是通过XMLHttpRequest对象实现的。该对象是由浏览器提供的,可以通过JavaScript对它进行操作,向服务端发送数据请求,然后异步地接收服务端响应数据。通过这种方式,前端页面与后端服务之间实现异步通信。
AJAX测试代码
以下是一个简单的AJAX测试代码实例,该代码通过AJAX请求获取后台数据并将结果展示在页面上。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX测试页面</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function ajaxTest() {
$.ajax({
type: "POST",
url: "/getData",
dataType: "json",
success: function (data) {
$("#result").text(data.message);
},
error: function (jqXHR) {
alert("发生错误:" + jqXHR.status);
}
});
}
</script>
</head>
<body>
<button onclick="ajaxTest()">点击获取数据</button>
<div id="result"></div>
</body>
</html>
// server.js
const express = require("express");
const app = express();
app.use(express.static("public"));
app.post("/getData", (req, res) => {
let result = {
"statusCode": 200,
"message": "Hello, AJAX!"
};
res.send(result);
});
app.listen(8080, () => {
console.log("Server started on port 8080.");
});
代码解释:
- index.html中script标签引入jQuery库;
- 定义名为ajaxTest的函数,使用jQuery的ajax方法向URI为/getData的路由发送POST请求,dataType为JSON,请求成功后将返回的数据展示在id为result的DIV标签中;
- server.js为后台Node.js代码,使用express框架搭建服务端,设置相关路由;
- /getData路由处理函数返回JSON类型数据。
示例说明
示例1
在index.html中添加以下代码:
<div id="notice"></div>
<script type="text/javascript">
<?php
$notice = "重要通知:即日起起点数据平台将采用新的接口协议,旧版API将不再支持。";
?>
$("#notice").text(<?php echo json_encode($notice); ?>);
</script>
该示例展示了如何在页面加载时通过AJAX获取后端PHP代码生成的通知信息。在该示例中,PHP代码生成通知信息$notice,然后通过json_encode函数对其进行JSON编码,最终将结果通过AJAX发送给前端页面。
示例2
在index.html中添加以下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX测试页面</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
function ajaxTest() {
$.ajax({
type: "POST",
url: "/search",
data: {
keyword: $("#keyword").val()
},
dataType: "json",
success: function (data) {
$("#result").text(data.message);
},
error: function (jqXHR) {
alert("发生错误:" + jqXHR.status);
}
});
}
</script>
</head>
<body>
<input type="text" id="keyword">
<button onclick="ajaxTest()">搜索</button>
<div id="result"></div>
</body>
</html>
// server.js
const express = require("express");
const app = express();
app.use(express.static("public"));
app.post("/search", (req, res) => {
let keyword = req.body.keyword;
let result = {
"statusCode": 200,
"message": `您正在搜索${keyword}相关信息。`
};
res.send(result);
});
app.listen(8080, () => {
console.log("Server started on port 8080.");
});
该示例展示了如何实现带参数的AJAX请求。在该示例中,用户可以在文本框中输入要搜索的关键字,然后通过AJAX发送给后台服务,后台服务处理该请求并返回相关信息。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:AJAX简单测试代码实例 - Python技术站