Php 基于文本输入字段,使用省填充下拉菜单
我有一个简单的用户表,其中显示用户信息,例如他们当前的国家和省份Php 基于文本输入字段,使用省填充下拉菜单,php,jquery,mysql,ajax,jquery-ui,Php,Jquery,Mysql,Ajax,Jquery Ui,我有一个简单的用户表,其中显示用户信息,例如他们当前的国家和省份 <td><b>Country</b></td> <td width="331"> <form method="post" action=""> <div id="countryList" style="vertical-align:top; display:inline-block; float:left;
<td><b>Country</b></td>
<td width="331">
<form method="post" action="">
<div id="countryList" style="vertical-align:top; display:inline-block; float:left;"><?=$country?></div>
<input type="submit" name="submitCountry" id="submitCountry" class="ui-icon ui-icon-disk" style="border:none; display:none; background-color:transparent; float:right; vertical-align:top;" />
</td>
<td width="336"> </td>
</tr>
<tr>
<td><b>Province</b></td>
<td>
<div id="provinceList" style="vertical-align:top; display:inline-block; float:left;"><?=$province?></div>
</form>
</td>
当用户单击他们的国家时,DIV将转换为带有autocomplete的输入框,并向数据库发出AJAX请求。这允许用户输入一个国家,它将显示在列表中
jQuery代码:
$("#countryList").click(function(){
$("#submitCountry").css("display", "inline");
//check if there are any existing input elements
if ($(this).children("input").length == 0){
//variable that contains input HTML to replace
var inputbox = "<input type='text' id='countryList' class='inputbox' name='country' value=\""+$(this).text()+"\">";
//insert the HTML intp the div
$(this).html(inputbox);
//automatically give focus to the input box
$(".inputbox").focus();
//maintain the input when it changes back to a div
$(".inputbox").blur(function(){
$("#submitCountry").css("display", "none");
var value = $(this).val();
$("#country").val(value);
$("#countryList").text(value);
});
}
//Once input box is displayed assign it the autocomplete method
$("input#countryList").autocomplete ({
//set a few options, and select source data
minLength : 2,
source : function (request, callback)
{
//variable that will carry the request 'term' from url
var data = { term : request.term };
//ajax method to call pho script
$.ajax ({
url : "getCountry.php",
data : data,
complete : function (xhr, result)
{
//if returns empty, then exit out
if (result != "success") return;
//otherwise get response and fill country array
var response = xhr.responseText;
var country = [];
//filter each li item
$(response).filter ("li").each (function ()
{
//display li item inline
country.push ($(this).text ());
});
//display country list
callback (country);
}
});
}
});
if ($("#provinceList").children("input").length == 0){
var selectbox = "<select id='selectProv' name='selectProv'></select> ";
$("#provinceList").html(selectbox);
var datastring = { term : request.term };
$.ajax({
url: "getProvince.php",
data: datastring,
success: function(html){
$(".selectProv").html(html);
}
})
}
getCountry.php文件如下所示。是的,我知道,我需要保护自己不受SQL注入的影响。目前,我在我的课程中还没有走那么远,我是一名学生
这里是getCountry.php
<?php
$term = $_REQUEST["term"];
$term = utf8_decode ($term);
$dbUser = "admin";
$dbPass = "pass";
$dbName = "testdb";
$bd = mysql_connect ("localhost", $dbUser, $dbPass);
$ret = mysql_select_db ($dbName, $bd);
$query = sprintf ("SELECT * FROM Country WHERE Name LIKE '%%" . $term . "%%'", mysql_real_escape_string($term));
//send query string to DB
$result = mysql_query($query);
//if result returns a value
if ($result != NULL){
// Use the result (sent to the browser)
while ($row = mysql_fetch_assoc($result)){
echo ("<li>" . utf8_encode ($row["Name"]) . " (" . utf8_encode ($row["Code"]) . ")</li>");
}
mysql_free_result($result);
}
mysql_close ($bd);
?>
getProvince.php
此代码将用于查询数据库并生成下拉菜单。我知道这段代码是有效的,因为我可以导航到它,并向它传递一个字符串,它将生成我需要的下拉列表。问题是它在整个应用程序中不起作用
<?php
$term = $_REQUEST["term"];
$term = utf8_decode ($term);
$dbUser = "admin";
$dbPass = "pass";
$dbName = "testdb";
$bd = mysql_connect ("localhost", $dbUser, $dbPass);
$ret = mysql_select_db ($dbName, $bd);
$query = sprintf ("SELECT * FROM Country WHERE Name LIKE '%%" . $term . "%%'", mysql_real_escape_string($term));
//send query string to DB
$result = mysql_query($query);
//if result returns a value
if ($result != NULL){
$row = mysql_fetch_assoc($result);
$code = $row['Code'];
$sql = "SELECT DISTINCT District FROM City WHERE CountryCode='$code'";
$result = mysql_query($sql);
?>
<option>Select State/Province</option>
<?php while($row=mysql_fetch_array($result)){
echo "<option value=" . $row['District'] . ">" . $row['District'] . "</option>";
}
mysql_free_result($result);
}
mysql_close ($bd);
上述代码在一定程度上起作用。我能够让国家文本框正确查询数据库并执行自动完成方法,但是结果不会像我希望的那样在下拉列表中填充省份!提前感谢您的查询未被清理!!!!!!!!!!!!!!!!!,两者都没有正确连接,您可以更简单地执行此操作:
$query = "SELECT * FROM Country WHERE Name LIKE '%" . mysql_real_escape_string($term) . "%'";
请始终清理您的输入,这甚至比拥有一个工作脚本更重要,因为您正在冒着数据库完整性的风险
这一行也应该被清理,连接的值来自数据库并不重要
$sql = "SELECT DISTINCT District FROM City WHERE CountryCode='" . mysql_real_escape_string($code) . "'";
以下行应为:
$.ajax({
url: "getProvince.php",
data: datastring,
success: function(html){
$("#selectProv").html(html);
}
});
注:selectProv改为selectProv表示“id”。意思是“类”谢谢你,但是这个问题必须更深入,因为它没有解决我的问题。很难说,我建议你使用Firefox的Firebug或Chrome的DeveloperTools菜单->工具->开发工具,在这里你可以检查DOM、调试Javascript以及检查服务器头和响应。