HTML根据文本框里的值用AJAX向后台传递数据 并接收后台查询出来的数据
时间: 2024-05-09 11:21:02 浏览: 9
以下是一个基本的HTML页面,其中包含一个文本框和一个按钮,用于向后台发送数据。使用jQuery的AJAX方法可以轻松地向后台发送请求并接收响应。
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML AJAX示例</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$("#search-btn").click(function() {
var value = $("#search-input").val(); // 获取文本框的值
$.ajax({
url: "search.php", // 后台处理脚本的URL
type: "POST", // 请求类型为POST
data: {search: value}, // 发送的数据
success: function(result) { // 成功接收响应后的回调函数
$("#result").html(result); // 将查询结果显示在页面中
}
});
});
});
</script>
</head>
<body>
<h1>HTML AJAX示例</h1>
<input type="text" id="search-input" placeholder="请输入查询关键字">
<button id="search-btn">查询</button>
<div id="result"></div>
</body>
</html>
```
在这个示例中,当用户点击查询按钮时,jQuery的点击事件处理程序将获取文本框的值,并使用AJAX向后台发送请求。请求发送到名为“search.php”的脚本,请求类型为POST,发送的数据为文本框的值。请求成功后,AJAX将调用一个名为“success”的回调函数,并将响应结果作为参数传递给它。在这个回调函数中,我们将查询结果显示在页面中的一个<div>元素中。后台脚本应该能够接收请求并根据接收到的数据进行查询。例如,以下是一个简单的PHP脚本,它从数据库中查询匹配查询关键字的行,并将结果作为HTML表格返回。
```php
<?php
// 获取查询关键字
$search = $_POST["search"];
// 连接到数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("连接失败:" . $conn->connect_error);
}
// 查询并返回结果
$sql = "SELECT * FROM mytable WHERE column LIKE '%$search%'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo "<table>";
while($row = $result->fetch_assoc()) {
echo "<tr><td>" . $row["column1"] . "</td><td>" . $row["column2"] . "</td></tr>";
}
echo "</table>";
} else {
echo "没有查询到结果。";
}
// 关闭数据库连接
$conn->close();
?>
```