Web:使用ajax实现页面部分更新,写出完整的html代码
时间: 2024-02-25 22:54:33 浏览: 128
好的,以下是一个使用 Ajax 实现页面部分更新的完整 HTML 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Ajax Demo</title>
<script>
function updateContent() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("content").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "data.php", true);
xmlhttp.send();
}
</script>
</head>
<body>
<h1>Ajax Demo</h1>
<p>点击下面的按钮,使用 Ajax 获取数据并更新页面</p>
<button onclick="updateContent()">更新内容</button>
<div id="content">
<p>这里是初始内容</p>
</div>
</body>
</html>
```
上面的代码中,当点击 "更新内容" 按钮时,会使用 Ajax 发送 GET 请求到 "data.php" URL,获取数据并更新页面中 id 为 "content" 的元素。在实际应用中,需要根据具体需求修改 URL 和数据处理方式。
阅读全文