AJAX+PHP+MYSQL实现两个下拉框间的数据联动
这个实例是我从项目中抽取出来的，有点乱，但是实现了无刷新的异动。刚学ajax，写的有点粗糙，凑合看吧。将inv_open.php文件放入www下，访问方式：http://localhost/inv_open.php。
代码如下：
1.inv_open：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ajax appliction sample:by enjoyxp 2007.10.17 21:15</title>
<script type="text/javascript">
function checkinput(form){
if(add_inv_form.inv_plant.value=="0"){
alert("请选择工厂名称!");
return(false);
}
if(add_inv_form.inv_loc.value=="0"){
alert("请选择库房名称!");
return(false);
}
/* re=/^[1-9]+[0-9]{0,14}$|^[0-9]{0,15}.[0-9]+$/;
if(!re.test(add_inv_form.inv_oh_qty.value)){
alert("目前数量无效，请重新输入!");
add_inv_form.inv_oh_qty.value="";
add_inv_form.inv_oh_qty.select();
return(false);
} */
}
function displayData() {
xmlhttp = createXMLHttpRequest();
if (xmlhttp) {
var postStr="plant="+ document.add_inv_form.inv_plant.value ;
xmlhttp.open("POST", "inv_openTest.php", true);
xmlhttp.onreadystatechange = updatePage;
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=gb2312");
xmlhttp.send(postStr);
}
}
function updatePage() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//获取伺服器的回应：xml数据
var xmlDoc = xmlhttp.responseXML;
//用两个数组接收xml数据
var result = new Array();
var result2 = new Array();
var len=xmlDoc.getElementsByTagName("ids").length;
for (i=0; i<len; i++){
var p = xmlDoc.getElementsByTagName("ids")[i];
var pval = p.firstChild.nodeValue;
result[i] = pval;
var p2 = xmlDoc.getElementsByTagName("descs")[i];
var pval2= p2.firstChild.nodeValue;
result2[i] = pval2;
}
//测试从伺服器获取的数据（换行）是否正确
var results="";
for(j=0; j<len; j++){
results=results+result[j]+String.fromCharCode(10);
}
//alert("results="+results);
//清空select控件的内容
document.add_inv_form.inv_loc.options.length = 0;
//将接收到的两个数组中的数据分别作为text和value放入select中
for(k=0; k<len; k++){
var oOption=document.createElement("Option");
oOption.text=result[k]+"-"+result2[k];
oOption.value=result[k];
document.add_inv_form.inv_loc.add(oOption);
}
}
}
function createXMLHttpRequest(){
var XMLhttpObject = null;
try{
XMLhttpObject = new XMLHttpRequest();
}catch(e){
try{
XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
return null;
}
}
}
return XMLhttpObject;
}
function submitData(){
xmlhttp = createXMLHttpRequest();
if (xmlhttp) {
xmlhttp.open("GET", "submit.php", true);
xmlhttp.onreadystatechange = succeed;
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=gb2312");
xmlhttp.send(null);
}
}
function succeed(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var doc=xmlhttp.responseText;
alert(doc);
}
}
</script>
</head>
<body>
<?php
function db_link(){
$access_id = "root";
$db_name = "inv";
@ $db = mysql_connect("localhost", $access_id, "831025") or
die("Could not connect to database. Please contact with IT supporting team ASAP.");
mysql_query("SET NAMES "GBK"");
mysql_select_db($db_name);
return $db;
}
$link = db_link();
$plant_desc_sql = "SELECT `plant_id`,`plant_desc` FROM `plant` ";
$plant_desc_res = mysql_query($plant_desc_sql);
$plant_desc_sql1 = "SELECT * FROM `plant` WHERE `plant_id`="".$_POST["inv_plant"].""";
$plant_desc_res1 = mysql_query($plant_desc_sql1);
$rows1_plant = mysql_fetch_array($plant_desc_res1);
?>
<form name="add_inv_form" onsubmit="return checkinput(this)">
<div id="div0">
<fieldset>
<legend>ajax sample</legend>
<table cellpadding="0" cellspacing="1">
<tr>
<td>Plant:</td>
<td><select name="inv_plant" onchange="displayData();">
<option value="0">--please select plant--
<?php
while($rows_plant=mysql_fetch_array($plant_desc_res)){
if($rows_plant["plant_id"]==$rows1_plant["plant_id"]){
echo "<option value="".$rows_plant["plant_id"]."" selected="selected">".$rows_plant["plant_id"]."-".$rows_plant["plant_desc"];}
else{
echo "<option value="".$rows_plant["plant_id"]."">".$rows_plant["plant_id"]."-".$rows_plant["plant_desc"];}
}
echo "</select>";
?>
</td>
<td>Location:</td>
<td><select name="inv_loc">
<option value="0">--please select location--</select></td>
<td><input type="button" name="inv_add" value="Save" onclick="submitData()"></td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
</html>
<?php
mysql_close($link);
?>
2.inv_openTest.php：
<?php
function db_link(){
$access_id = "root";
$db_name = "inv";
@ $db = mysql_connect("localhost", $access_id, "831025") or
die("Could not connect to database. Please contact with IT supporting team ASAP.");
mysql_query("SET NAMES "GBK"");
mysql_select_db($db_name);
return $db;
}
$link = db_link();
$inv_plant = $_POST["plant"];
$loc_sql = "SELECT * FROM loc WHERE loc_plant ="".$inv_plant."" AND loc_act = "1"";
$loc_result = mysql_query($loc_sql);
header("Content-Type:text/xml");//accessary code
echo "<?xml version="1.0" encoding="gb2312" ?>
<locations>";
while($loc_rs=mysql_fetch_array($loc_result)){
echo "<ids>".$loc_rs["loc_id"]."</ids>";
echo "<descs>".$loc_rs["loc_desc"]."</descs>";
}
echo "</locations>";
mysql_close($link);
?>
3.submit.php:
<?php
echo "succeed";
?>
- 上一篇： php过滤替换特殊字符 函数
- 下一篇： PHP零基础遍历查询数据库结果集
