要
实现Ajax+
PHP数据交互并
局部刷新页面，需要以下步骤：
1. 创建一个包含HTML和
PHP代码的页面，并在页面顶部引入jQuery库和一个自定义的JavaScript文件。
2. 在JavaScript文件
中编写一个Ajax请求的代码，指定请求的URL和请求方法（POST或GET），并定义回调函数。
3. 在
PHP文件
中编写处理Ajax请求的代码，包括从请求
中获取参数、
查询数据库、将
查询结果转换为JSON格式等。
4. 在回调函数
中解析返回的JSON数据，并使用jQuery的DOM操作方法将数据插入到页面
中指定的位置，
实现局部刷新效果。
下面是一个简单的例子，演示如何使用Ajax和
PHP实现查询结果的
局部刷新：
HTML/
PHP页面代码：
```html
<html>
<head>
<title>
PHP查询结果
局部刷新</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="ajax.js"></script>
</head>
<body>
<h1>
查询结果：</h1>
<div id="result"></div>
<form>
<label>输入
查询条件：</label>
<input type="text" name="keyword" id="keyword">
<input type="button" value="
查询" onclick="search()">
</form>
</body>
</html>
```
JavaScript文件代码（ajax.js）：
```javascript
function search() {
var keyword = $("#keyword").val();
$.ajax({
url: "search.
php",
type: "POST",
data: { keyword: keyword },
dataType: "json",
success: function(result) {
var html = "";
for (var i = 0; i < result.length; i++) {
html += "<p>" + result[i].name + "：" + result[i].value + "</p>";
}
$("#result").html(html);
},
error: function(jqXHR, textStatus, errorThrown) {
alert("
查询失败：" + textStatus);
}
});
}
```
PHP文件代码（search.
php）：
```
php
<?
php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("连接失败：" . $conn->connect_error);
}
// 获取
查询条件
$keyword = $_POST["keyword"];
//
查询数据库
$sql = "SELECT * FROM data WHERE name LIKE '%$keyword%'";
$result = $conn->query($sql);
// 将
查询结果转换为JSON格式
$data = array();
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$data[] = array("name" => $row["name"], "value" => $row["value"]);
}
}
echo json_encode($data);
// 关闭数据库连接
$conn->close();
?>
```
在这个例子
中，我们在页面
中添加了一个输入框和一个
查询按钮，用户输入
查询条件后，点击
查询按钮会触发JavaScript
中的search()函数，该函数使用Ajax向search.
php发送POST请求，将
查询条件作为参数传递给
PHP文件，
PHP文件从数据库
中查询符合
条件的数据，并将
查询结果转换为JSON格式返回给JavaScript，JavaScript解析JSON数据，并使用jQuery将
查询结果插入到页面
中指定的位置（id为result的div元素）
实现局部刷新。
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
