以下是一个
使用ajax和
后端交互的示例代码，并带有详细注释：
HTML代码：
```
html
<!DOCTYPE
html>
<
html>
<head>
<title>
AJAX Example</title>
<script src="https://
ajax.googleapis.com/
ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- 引入jQuery库 -->
</head>
<body>
<button id="myButton">Click Me</button> <!-- 点击按钮触发
ajax请求 -->
<div id="myDiv"></div> <!-- 显示
ajax返回的
数据 -->
<script>
$(document).ready(function(){ // 当
文档加载完毕后执行
$("#myButton").click(function(){ // 当按钮被点击
时执行
$.
ajax({ //
使用ajax发送
请求
url: "backend.php", //
请求的URL
data: {name: "John", age: 30}, //
请求的参数，可以是对象、数组或字符串
type: "POST", //
请求的方法，可以是GET或POST
dataType: "json", //
返回的
数据类型，可以是text、
html、xml、json、script等
success: function(result){ //
请求成功后执行的回调函数
$("#myDiv").
html(result.message); // 在页面上显示
返回的
数据
},
error: function(xhr, status, error){ //
请求失败后执行的回调函数
console.log(xhr.responseText); // 打印
错误信息到控制台
}
});
});
});
</script>
</body>
</
html>
```
backend.php代码：
```php
<?php
$name = $_POST["name"]; //
获取请求的参数
$age = $_POST["age"];
$response = array("message" => "Hello, " . $name . "! You are " . $age . " years old."); // 构造
返回的
数据
header("Content-Type: application/json"); // 声明
返回的
数据类型是json
echo json_encode($response); //
返回json格式的
数据
?>
```
注释：
1. 在
HTML代码中，
使用jQuery库引入了
ajax的相关方法。
2. 当页面加载完毕后，给“Click Me”按钮绑定了一个点击事件，当按钮被点击
时会触发
ajax请求。
3.
使用ajax发送
请求的相关参数，包括
请求的URL、
请求的参数、
请求的方法、
返回的
数据类型等等。
4. 在
请求成功后，会执行一个回调函数，将
返回的
数据显示在页面上。
5. 在
请求失败后，会执行一个回调函数，将
错误信息打印到控制台上。
6. 在backend.php代码中，
获取了
请求的参数，并构造了
返回的
数据。
7. 声明
返回的
数据类型是json，并将
数据以json格式
返回。
1437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
