在同一个PHP页面中使用两次AJAX从MySQL数据库检索数据并打印到文本框的方法如下:
首先,确保你已经连接到MySQL数据库,并且有一个包含所需数据的表。
然后,创建一个PHP页面,我们称之为index.php,并在其中包含两个文本框,用于显示从数据库检索到的数据。
<!DOCTYPE html>
<html>
<head>
<title>AJAX数据检索示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>使用AJAX从MySQL数据库检索数据</h1>
<h2>第一个文本框</h2>
<input type="text" id="textbox1">
<h2>第二个文本框</h2>
<input type="text" id="textbox2">
<script>
$(document).ready(function() {
// 第一个AJAX请求
$.ajax({
url: 'retrieve_data.php', // 后端处理数据的PHP文件
type: 'GET',
data: {textbox: 'textbox1'}, // 用于标识请求的文本框
success: function(response) {
$('#textbox1').val(response); // 将返回的数据填充到第一个文本框
}
});
// 第二个AJAX请求
$.ajax({
url: 'retrieve_data.php', // 后端处理数据的PHP文件
type: 'GET',
data: {textbox: 'textbox2'}, // 用于标识请求的文本框
success: function(response) {
$('#textbox2').val(response); // 将返回的数据填充到第二个文本框
}
});
});
</script>
</body>
</html>
接下来,创建一个名为retrieve_data.php的PHP文件,用于处理AJAX请求并从数据库中检索数据。
<?php
// 连接到MySQL数据库
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接是否成功
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// 获取请求的文本框标识
$textbox = $_GET['textbox'];
// 根据文本框标识执行相应的查询
if ($textbox == 'textbox1') {
$sql = "SELECT column1 FROM your_table WHERE condition1";
} elseif ($textbox == 'textbox2') {
$sql = "SELECT column2 FROM your_table WHERE condition2";
}
$result = $conn->query($sql);
// 检查查询结果
if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
echo $row['column1']; // 返回第一个文本框的数据
// 或者使用以下代码返回第二个文本框的数据
// echo $row['column2'];
} else {
echo "没有找到数据";
}
$conn->close();
?>
在retrieve_data.php文件中,根据请求的文本框标识执行相应的查询,并将结果返回给AJAX请求。
请注意,上述示例中使用了jQuery库来简化AJAX请求的编写。确保在页面中引入jQuery库。
这是一个基本的示例,你可以根据自己的需求进行修改和扩展。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax做分页</title>
<script src="bootstrap/js/jquery-1.11.2.min.js"></script>
<script src="Ajax_pag.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link href="bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css"/>
</head>
<style>
.header{
margin-top: 20px;
}
</style>
<body>
领取专属 10元无门槛券
手把手带您无忧上云