jQuery AJAX之异步访问和加载片段
HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../../Scripts/jquery-3.4.1.min.js"></script>
<script src="ajaxindex.js"></script>
</head>
<body>
<input type="text" id="namevalue" />
<br />
<button id="btn">Send</button>
结果：<span id="result"></span>
<!--加载片段-->
</body>
</html>
JS文件：
$(document).ready(function () {
$("#btn").on("click", function () {
$("#result").text("请求数据中，请稍后……");//防止延迟卡顿
$.get("Server.php", { name: $("#namevalue").val() },function (data) {//参数1：网址，参数2：参数，参数3：返回值
$("#result").text(data);//Ajax异步请求，只更新结果，不刷新页面
}).error(function () {
$("#result").text("通讯失败！");
});
});
$("#btn").on("click", function () {
$.post("Server.php", { name: $("#namevalue").val() }, function (data) {//参数1：网址，参数2：参数，参数3：返回值
$("#result").text(data);//Ajax异步请求，只更新结果，不刷新页面
});
});
//加载片段
$("body").text("wait……");//等待加载
$("body").load("HtmlPage1.htm", function (a, status, c) {//三个参数
console.log(status);//观察状态
if (status == "error") {
$("body").text("加载失败");
}
});
$.getScript("HelloJS.js").complete(function () {//加载JS文件
sayHello();
});
});
HTM文件：
<div style="width:100px;height:100px;background-color:#ff0000"></div>
HelloJS.JS文件：
function sayHello() {
alert("Hello AJAX！");
}
