第一节：Ajax 入门及环境
Ajax 是 Asynchronous JavaScript and XML 的缩写，它是一种创建交互式网页的技术。Ajax 可以让你在不重新加载整个网页的情况下更新网页的部分内容。
以下是一个简单的使用 jQuery 实现的 Ajax 请求示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#fetch-btn').click(function() {
$.ajax({
url: 'https://api.myjson.com/bins/9inum', // 这是一个示例 JSON API
type: 'GET',
dataType: 'json',
success: function(data) {
$('#result').text(JSON.stringify(data));
},
error: function(xhr, status, error) {
console.error("An error occurred: " + status + "\nError: " + error);
}
});
});
});
</script>
</head>
<body>
<button id="fetch-btn">Fetch Data</button>
<div id="result"></div>
</body>
</html>在这个例子中，当按钮被点击时，Ajax 请求会发送到指定的 URL 获取数据。成功获取数据后，数据会被转换为字符串并显示在页面的指定元素中。如果请求失败，会在控制台输出错误信息。
注意：在实际应用中，你需要确保网页与请求的资源（URL）是同源的，或者服务器配置了适当的 CORS 策略以允许跨源请求。
评论已关闭