非常简单的Ajax请求实例附源码指的是使用Ajax技术实现异步请求后端数据并解析的过程，实现网页无需刷新即可展示新内容或更新信息。下面我们将通过两个示例来详细讲解该攻略。
示例1
首先，我们创建一个包含以下内容的HTML页面，该页面包含了一个文本输入框、一个按钮和用于显示结果的空div：
<!DOCTYPE html>
<html>
<head>
<title>异步请求示例</title>
</head>
<body>
<input type="text" id="input">
<button id="button">提交</button>
<div id="resDiv"></div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
$("#button").click(function(){
var text = $("#input").val();
$.ajax({
"url": "https://api.github.com/users/" + text,
"type": "GET",
"success": function(data){
$("#resDiv").html("用户名：" + data.login + "<br>介绍：" + data.bio);
},
"error": function(){
alert("请求失败");
}
});
});
});
</script>
</body>
</html>
在该页面中，我们引入了jQuery库，并使用其提供的click()函数来绑定点击事件。当用户点击按钮时，我们使用jQuery提供的$.ajax()函数来发送一个异步GET请求，并获取GitHub的用户信息。如果请求成功，我们从返回的数据中提取用户名和介绍，并使用html()函数将这些信息显示在空的div标签中。
示例2
下面是另一个示例，它使用原生JS来实现异步请求：
<!DOCTYPE html>
<html>
<head>
<title>异步请求示例</title>
</head>
<body>
<button id="button">加载数据</button>
<div id="resDiv"></div>
<script>
document.getElementById("button").onclick = function(){
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.github.com/users/soasme");
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var data = JSON.parse(xhr.responseText);
document.getElementById("resDiv").innerHTML = "用户名：" + data.login + "<br>介绍：" + data.bio;
}else{
alert("请求失败");
}
}
};
xhr.send();
};
</script>
</body>
</html>
在该页面中，我们首先使用getElementById()函数获取到按钮和用于显示结果的div标签，然后使用原生JS提供的XMLHttpRequest()对象来创建一个异步GET请求，并指定URL为GitHub的用户信息API。当请求状态改变时，我们通过读取readystate和status属性来确定请求是否成功。如果请求成功，我们使用JS内置函数JSON.parse()从返回的数据中提取JSON对象，然后将用户名和介绍写入到div标签中。
以上是非常简单的Ajax请求实例附源码的攻略和示例说明。希望能对您有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：非常简单的Ajax请求实例附源码 - Python技术站
微信扫一扫 
支付宝扫一扫 