使用AJAX根据下拉框返回查询结果
Posted
技术标签:
【中文标题】使用AJAX根据下拉框返回查询结果【英文标题】：Using AJAX to return query results based on drop down box 【发布时间】：2013-07-20 04:38:56 【问题描述】：我知道这是一个很受欢迎的问题，并且我查看了许多示例，试图让我了解 AJAX 和 jQuery。
我有一个简单的情况，一个下拉框在更改时会根据下拉框选择发送AJAX 请求以获取SQL 查询的结果。
页面加载正确，当从下拉框中选择部门时调用函数（警报告诉我），但我没有收到任何返回数据。在尝试确定问题时，如何判断 getTeachers.php 文件是否实际运行？
网页 服务端调用getTeacher.php的脚本
<script src="http://localhost/jquery/jquery.min.js">
</script>
<script>
function checkTeacherList(str)
var xmlhttp;
if (str=="")
document.getElementById("txtTeacher").innerhtml="";
return;
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("txtTeacher").innerHTML=xmlhttp.responseText;
xmlhttp.open("GET","getTeachers.php?q="+str,true);
xmlhttp.send();
alert(str); //To test it is getting this far, which it does
</script>
从服务器返回数据的下拉框和 txtTeacher ID
<select name="department_list" id="department_list" onchange="checkTeacherList(this.value);" >
<?php
$options[0] = 'All';
$intloop = 1;
while($row = mysql_fetch_array($department_result))
$options[$intloop] = $row['departmentName'];
$intloop = $intloop + 1;
foreach($options as $value => $caption)
echo "<option value=\"$caption\">$caption</option>";
?>
</select>
<div id="txtTeachers">Teacher names</div>
服务器端 PHP - getTeachers.php
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'root', '');
if (!$con)
die('Could not connect: ' . mysql_error($con));
$db_selected = mysql_select_db("iobserve");
$sql="SELECT * FROM departments WHERE departmentName = '".$q."';";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
echo $row['teacherName'];
mysql_close($con);
?>
【问题讨论】：
要测试文件是否运行，您可以使用一些硬编码的虚拟数据进行响应，而不是运行可能失败的代码。 谢谢 - 原来我需要将完整路径放入 php 文件中。我从 WordPress 运行它，它一定很难找到它。 如果您不希望每个人都可以删除您的数据库，请将 mysql_real_escape_string 添加到您的选择查询中。 【参考方案1】：将您在 getTeacher.php 页面中的查询更改为。 $sql="SELECT * FROM 部门 WHERE departmentName = '$q'";
【讨论】：
谢谢 - 问题是缺少分号..... departmentName = '".$q."';";【参考方案2】：我记得我用 Jquery 做我的第一个 Ajax 请求，发现也很难找到一个好的完整示例，尤其是带有错误处理的东西（如果后端出现问题，我如何告诉用户，例如数据库不是可用的？）。
这是您使用 PDO 和 Jquery 重写的代码，包括一些错误处理（我没有使用 Mysql 扩展，因为它已从最近的 PHP 版本中删除（顺便说一句，您的代码对 sql 注入开放，删除数据库很容易） ):
<!DOCTYPE html>
<html>
<head>
<title>Selectbox Ajax example</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<div id="error"></div>
<select name="department_list" id="department_list">
<option value="department1">Department 1</option>
<option value="department2">Department 2</option>
</select>
<div id="txtTeachers">Teacher names</div>
<div id="result">
<ul id="list">
</ul>
</div>
<script type="text/javascript">
$(document).ready(function ()
// if user chooses an option from the select box...
$("#department_list").change(function ()
// get selected value from selectbox with id #department_list
var selectedDepartment = $(this).val();
$.ajax(
url: "getTeachers.php",
data: "q=" + selectedDepartment,
dataType: "json",
// if successful
success: function (response, textStatus, jqXHR)
// no teachers found -> an empty array was returned from the backend
if (response.teacherNames.length == 0)
$('#result').html("nothing found");
else
// backend returned an array of names
var list = $("#list");
// remove items from previous searches from the result list
$('#list').empty();
// append each teachername to the list and wrap in <li>
$.each(response.teacherNames, function (i, val)
list.append($("<li>" + val + "</li>"));
);
);
);
// if anywhere in our application happens an ajax error,this function will catch it
// and show an error message to the user
$(document).ajaxError(function (e, xhr, settings, exception)
$("#error").html("<div class='alert alert-warning'> Uups, an error occurred.</div>");
);
);
</script>
</body>
</html>
PHP部分
<?php
// we want that our php scripts sends an http status code of 500 if an exception happened
// the frontend will then call the ajaxError function defined and display an error to the user
function handleException($ex)
header('HTTP/1.1 500 Internal Server Error');
echo 'Internal error';
set_exception_handler('handleException');
// we are using PDO - easier to use as mysqli and much better than the mysql extension (which will be removed in the next versions of PHP)
try
$password = null;
$db = new PDO('mysql:host=localhost;dbname=iobserve', "root", $password);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// note the quote thing - this prevents your script from sql injection
$data = $db->query("SELECT teacherName FROM departments where departmentName = " . $db->quote($_GET["q"]));
$teacherNames = array();
foreach ($data as $row)
$teacherNames[] = $row["teacherName"];
// note that we are wrapping everything with json_encode
print json_encode(array(
"teacherNames" => $teacherNames,
"anotherReturnValue" => "just a demo how to return more stuff")
);
catch (PDOException $e)
echo 'ERROR: ' . $e->getMessage();
【讨论】：
首先，我非常感谢您花时间回答这个问题。我同意刚开始时很难找到好的例子。我实际上已经让它工作并且似乎更好地理解它，但会通过你发送的内容来进一步改进它。我很想知道什么是 SQL 注入，但也会查一下。而且我知道我需要离开 MySQL ……要学的东西太多了。再次感谢。【参考方案3】：您需要在单个字符串中发送响应。因此，将查询返回的所有教师组成一个字符串。
然后在你的 ajax 部分，拆分这个字符串。
【讨论】：
以上是关于使用AJAX根据下拉框返回查询结果的主要内容，如果未能解决你的问题，请参考以下文章