简单的ajax案例，页面的简单渲染
warning:
这篇文章距离上次修改已过203天，其中的内容可能已经有所变动。
以下是一个简单的使用jQuery进行Ajax请求并动态更新页面内容的例子：
HTML:
<!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>
</head>
<body>
<div id="content">
<!-- 内容将被动态插入此处 -->
</div>
<button id="loadBtn">加载内容</button>
<script src="script.js"></script>
</body>
</html>JavaScript (script.js):
$(document).ready(function() {
$('#loadBtn').click(function() {
$.ajax({
url: 'data.json', // 假设有一个名为data.json的文件提供数据
type: 'GET',
dataType: 'json',
success: function(data) {
var html = '';
$.each(data, function(key, value) {
html += '<p><b>' + key + ':</b> ' + value + '</p>';
});
$('#content').html(html); // 更新页面内容
},
error: function() {
alert('加载数据失败！');
}
});
});
});假设的JSON文件 (data.json):
{
"Name": "张三",
"Age": "30",
"Occupation": "软件工程师"
}这个例子中，当用户点击按钮时，会发起一个Ajax请求去加载data.json文件中的数据，然后遍历这些数据并将它们以key: value的格式动态插入到页面的<div id="content">元素中。如果请求成功，则更新页面内容；如果失败，则弹出错误提示。
评论已关闭