用图片展示ajax异步调用和局部刷新的步骤
时间: 2023-06-18 13:04:02 浏览: 124
ajax异步调用局部刷新
3星 · 编辑精心推荐
以下是一个简单的示例,展示了如何使用 AJAX 进行异步调用和局部刷新。
1. 创建一个 HTML 页面,包含一个按钮和一个用于显示 AJAX 响应的容器。
```html
<!DOCTYPE html>
<html>
<head>
<title>AJAX Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({
url: "response.php",
success: function(result){
$("#response").html(result);
}
});
});
});
</script>
</head>
<body>
<button>Click Me</button>
<div id="response"></div>
</body>
</html>
```
2. 创建一个 PHP 文件,用于处理 AJAX 请求并返回响应。
```php
<?php
echo "Hello, AJAX!";
?>
```
3. 启动 Web 服务器并运行 HTML 页面。
4. 点击按钮,将向服务器发送 AJAX 请求并接收响应。响应将显示在页面上的容器中。
这就是 AJAX 异步调用和局部刷新的基本步骤。请注意,这只是一个简单的示例,实际应用中可能需要更多的代码和处理。
阅读全文