html文件内容
<html>
<meta http-equiv="Content-type" content="text/htmlcharset=utf-8" ></meta>
<head>
<title>
demo
</title>
<script src="jquery.js" type="text/javascript"></script><!--引入jquery -->
<script>
function getarea(){
var region_id = $("#region").val()//获得下拉框中大区域的值
if(region_id != ''){
$.ajax({
type: "post",
url: "b.php",
data:"region_id="+region_id,
cache:false,
beforeSend: function(XMLHttpRequest){
},
success: function(data, textStatus){
//alert(data)
$("#area").empty()//清空area下拉框
$("#area").append(data)//给area下拉框添加option
},
complete: function(XMLHttpRequest, textStatus){
},
error: function(){
//请求出错处理
}
})
}
}
</script>
</head>
<body>
<div >
<table class='itable' width='100%' id='timetable' >
<tr>
<td class="test_c" id="one">
<select id="region" name="region" onchange="getarea()">
<option value="">请选择</option>
<option value="1">东北</option>
<option value="2">华北</option>
</select>
</td>
</tr>
<tr>
<td>
<select id="area" name="area">
</select>
</td>
</tr>
</table>
</div>
</body>
</html>
=============
b.php内容
<?php
$region_id = $_POST['region_id']
//根据前台传过来的region_id来处理下拉框的内容.
//这里演示直接输出,你可以从数据库中读出来组织后再输出.
switch($region_id){
case 1:{
$area_option = "<option value='1'>辽宁</option><br><option value='2'>吉宁</option><br><option value='3'>黑龙江</option>"
echo $area_option
break
}
case 2:{
$area_option = "<option value='4'>北京</option><option value='5'>天津</option><option value='6'>河北</option>"
echo $area_option
break
}
}
?>
大致是两个步骤：客户端触发读取数据请求，服务器端接收请求查询数据库并返回结果。
1、客户端请求
假设从页面的下拉列表中选择一个客户，当用户在下拉列表中选择某个客户时，会执行名为 "showCustomer()" 的函数。该函数由 "onchange" 事件触发：
function showCustomer(str){
var xmlhttp
if (str=="")
{
document.getElementById("txtHint").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("txtHint").innerHTML=xmlhttp.responseText
}
}
xmlhttp.open("GET","getcustomer.asp?q="+str,true)
xmlhttp.send()
}
2、服务器端响应，asp示例：
<%response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn
response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
%>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）