如何使用AJAX在选择选项选项上执行PHP查询?
好的我知道这已经在(Execute PHP script on same page after selecting a dropdown list option using Ajax or JavaScript)之前得到了解答,但答案对于以前从未使用过AJAX的人来说并不是很有帮助。如果有人从下拉列表中选择一个选项,我该如何运行一个查询?如何使用AJAX在选择选项选项上执行PHP查询?
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<h3>Subject</h3>
<select name="allbooks" >
<option value="none" ></option>
<option value="allbooks" >All Books</option>
</select>
<?php
$query = "SELECT * FROM books" or die("Error in the consult.." . mysqli_error($connection));
$books = $connection->query($query);
?>
首先是,你必须通过触发使用Javascript AJAX请求。但我会通过使用jQuery(一个Javascript库)来指导您。
你的HTML:
<select name="allbooks" id="allbooks">
<option value="none" ></option>
<option value="allbooks" >All Books</option>
</select>
<div id="show">
<!-- ITEMS TO BE DISPLAYED HERE -->
</div>
之后,下载jQuery。
然后让这样做的脚本:
<script src="jquery-1.9.1.min.js"></script> <!-- CHANGE THE JQUERY FILE DEPENDING ON THE VERSION YOU HAVE DOWNLOADED -->
<script type="text/javascript">
$(document).ready(function(){ /* PREPARE THE SCRIPT */
$("#allbooks").change(function(){ /* WHEN YOU CHANGE AND SELECT FROM THE SELECT FIELD */
var allbooks = $(this).val(); /* GET THE VALUE OF THE SELECTED DATA */
var dataString = "allbooks="+allbooks; /* STORE THAT TO A DATA STRING */
$.ajax({ /* THEN THE AJAX CALL */
type: "POST", /* TYPE OF METHOD TO USE TO PASS THE DATA */
url: "get-data.php", /* PAGE WHERE WE WILL PASS THE DATA */
data: dataString, /* THE DATA WE WILL BE PASSING */
success: function(result){ /* GET THE TO BE RETURNED DATA */
$("#show").html(result); /* THE RETURNED DATA WILL BE SHOWN IN THIS DIV */
}
});
});
});
</script>
然后让创造get-data.php
将接收通过AJAX发送的数据。
if(!empty($_POST["allbooks"])){
/* DO YOUR QUERY HERE AND GET THE OUTPUT YOU WANT */
echo $output; /* PRINT THE OUTPUT YOU WANT, IT WILL BE RETURNED TO THE ORIGINAL PAGE */
}
您可以查看本示例 - JSfiddle。
从这个谢谢你能够实现和理解Ajax! – triswill227
令人惊叹的答案,非常有帮助 –
太棒了!但是,如果处理dataString对象时遇到任何问题,请尝试在ajax部分添加:> data:{allbooks:dataString};) – Smaillns
var id="1";
$.ajax({
type: 'POST',
url: 'yourphppage',
dataType: "json",
data: {
idofrow:id
},
success: function(data) {
alert(data);
},
error: function(data) {
alert(data);
}
});
这是Ajax请求的samle你可以使用这个,只是改变其他领域需要查询的时候是成功的,你可以在成功检索数据,您可以操纵你想要什么样的数据使用您可以返回json
,text
。
在你的PHP页面,您可以获取ID作为
$id = ($_POST['idofrow']);
你可以,那么你这个ID来选择这样的
SELECT * FROM table where rowid = $id
,你可以直接呼应的结果。
,了解更多信息只需选中这个documentation
Check this simple tutorial希望这会有所帮助。
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
// getuser.php is seprate php file. q is parameter
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>
的getuser.php文件
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
// don't use intval if your select value is not numberic
$q = $_GET['q'];
$con = mysqli_connect('localhost','peter','abc123','my_db');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>
我知道这只是一个例子,但无论如何(比对不起更安全): 永远不要永远不要将未经检查的用户输入传递给mysql。 – Alar
您必须将ajax请求发送到您的php页面,然后您在php页面中执行查询,然后将结果返回到您的html页面 – guradio
好吧,我该如何做ajax部分? – triswill227
您链接到的那个页面显示。这里是另一个页面,https://learn.jquery.com/ajax/ – chris85