使用 Ajax 或 JavaScript 选择下拉列表选项后，在同一页面上执行 PHP 脚本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12210608/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Execute PHP script on same page after selecting a dropdown list option using Ajax or JavaScript
提问by Yogesh Rawal
I am creating a MySQL query that will be execute when user select options from more a dropdown lists.
我正在创建一个 MySQL 查询，当用户从更多下拉列表中选择选项时将执行该查询。
What I want is, on selecting a dropdown list option a query related to that option should be automatically executed using ajax/javascript on the same page. As I have the both html and php code on the same page.
我想要的是，在选择下拉列表选项时，应在同一页面上使用 ajax/javascript 自动执行与该选项相关的查询。因为我在同一页面上同时拥有 html 和 php 代码。
Earlier I was using form submit options for dropdown list but as the number of dropdown option are more than five for filtering the result so queries became complicated to implement. That's why I want to refine result of each dropdown individually.
早些时候，我使用下拉列表的表单提交选项，但由于下拉选项的数量超过五个用于过滤结果，因此查询变得难以实现。这就是为什么我想单独优化每个下拉菜单的结果。
Any help is appreciated. Thanks in advance!
任何帮助表示赞赏。提前致谢！
My HTML code for dropdown list is:
我的下拉列表的 HTML 代码是：
<p>
<label for="experience">Experience :</label>
<select id="experience" name="experience">
<option value="" selected="selected">All</option>
<option value="Fresher">Fresher</option>
<option value="Experienced">Experienced</option>
</select>
</p>
PHP code for executing related queries is:
用于执行相关查询的 PHP 代码是：
<?php
if (isset($_GET['exp'])) {
switch ($_GET['exp']) {
case 'Experienced':
$query = "SELECT job_seekers.ID, job_seekers.Name, job_seekers.Skills, job_seekers.Experience FROM job_seekers where job_seekers.Experience!='Fresher'";
break;
case 'Fresher':
$query = "SELECT job_seekers.ID, job_seekers.Name, job_seekers.Skills, job_seekers.Experience FROM job_seekers where job_seekers.Experience='Fresher'";
break;
default:
$query = "SELECT job_seekers.ID, job_seekers.Name, job_seekers.Skills, job_seekers.Experience FROM job_seekers";
}
}
$result = mysql_query($query) or die(mysql_error());
echo "<ul class=\"candidates\">";
while($row = mysql_fetch_row($result))
{
echo "<li>";
echo "<p> <b>ID:</b> <u>$row[0]</u> </p>";
echo "<p> <b>Name :</b> $row[1] </p>";
echo "<p> <b>Key Skills:</b> $row[2] </p>";
echo "<p> <b>Experience:</b> $row[3] </p>";
echo "</li>";
}
echo "</ul>";
?>
回答by Mic1780
When you want to AJAX call a php script, you should you $.ajax provided by Jquery
当你想通过 AJAX 调用一个 php 脚本时，你应该使用 Jquery 提供的 $.ajax
so you can use it like so:
所以你可以像这样使用它：
$.ajax({
url: 'ajax.php',
data: {
//put parameters here such as which dropdown you are using
},
success: function(response) {
//javascript and jquery code to edit your lists goes in here.
//use response to refer to what was echoed in your php script
}
});
this way, you will have dynamic dropdowns and the refined results you want
这样，您将拥有动态下拉菜单和您想要的精致结果
回答by saad arshad
You cannot re-execute a PHP part on the same page. Rather use Ajax request to perform the action.
您不能在同一页面上重新执行 PHP 部分。而是使用 Ajax 请求来执行操作。
回答by Mansoorkhan Cherupuzha
<?php
if (isset($_GET['experience'])) {
echo $_GET['experience'];
/* do mysql operations and echo the result here */
exit;
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
function myFunction(value)
{
if(value!="All")
{
$.ajax(
{
type: "GET",
url: '<?php echo $_SERVER['PHP_SELF']; ?>',
data: { experience: value},
success: function(data) {
$('#resultDiv').html(data);
}
});
}
else
{
$('#resultDiv').html("Please select a value.");
}
}
</script>
</head>
<body>
<p>
<label for="experience">Experience :</label>
<select id="experience" name="experience" onChange="myFunction(this.value)">
<option value="All" selected="selected">All</option>
<option value="Fresher">Fresher</option>
<option value="Experienced">Experienced</option>
</select>
</p>
<div id="resultDiv">
Please select a value.
</div>
</body>
</html>
