参考例子：
1、ajax.jsp
<!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>
<title>Ajax</title>
<script type="text/javascript">
function loadXMLDoc(txt) {
var xmlhttp
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) {
var citys = xmlhttp.responseText.split(',')
document.getElementById("citys").length = 1
for (i = 0i <citys.length - 1i++) {
document.getElementById("citys").add(new Option(citys[i], citys[i]))
}
//document.getElementById("myDiv").innerHTML = xmlhttp.responseText
}
}
xmlhttp.open("GET","ajax/getdata.aspx?pro="+txt, true)
xmlhttp.send()
}
</script>
</head>
<body>
<h2>AJAX</h2>
<select id="Select1" onchange="loadXMLDoc(this.value)">
<option>请选择省份</option>
<option value="1">江苏</option>
<option value="2">上海</option>
</select>
<select id="citys">
<option>请选择城市</option>
</select>
<div id="myDiv"></div>
</body>
</html>
后台取数据代码：
using System
using System.Collections.Generic
using System.Linq
using System.Web
using System.Web.UI
using System.Web.UI.WebControls
public partial class ajax_getdata : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string[] js=new string[]{"南京", "苏州", "常州" , "无锡" , "镇江"}
string pro=Request.QueryString["pro"]
if (pro == "1")
{
string temp = ""
for (int i = 0i <js.Lengthi++)
{
temp = temp + js[i]
temp = temp + ","
}
Response.Write(temp)
}
else
Response.Write("")
}
}
你后台把json数组转字符串之后不输出放进request对象中干嘛呢？我用的另一种方法实现的三级联动，省市区的：
<script type="text/javascript">jQuery(document).ready(function($){
$("#province").change(function(){
var pid=$("#province").val()
var sectionObj=document.getElementById("section")
sectionObj.length=0
sectionObj.options[0]=new Option("请选择区县",-1)
sectionObj.value=-1
if(pid!=-1){
var url="/service_order/getCity.htm"
var data={"provinceId":pid}
$.post(url,data,function(result){
var cityObj=document.getElementById("city")
cityObj.length=0
var aryData=null
if(!!(window.attachEvent && !window.opera)){
//ie
aryData=execScript(result)
}else
{ //not ie
aryData=eval(result)
}
cityObj.options[0]=new Option("请选择城市",-1)
for(var i=0i<aryData.lengthi++){
var city=aryData[i]
cityObj.options[i+1]=new Option(city.name,city.id)
}
})
}else{
var cityObj=document.getElementById("city")
cityObj.length=0
cityObj.options[0]=new Option("请选择城市",-1)
cityObj.value=-1
}
})
$("#city").change(function(){
var cid=$("#city").val()
if(cid!=-1){
var url="/service_order/getSection.htm"
var data={"cityId":cid}
$.post(url,data,function(result){
var sectionObj=document.getElementById("section")
sectionObj.length=0
var aryData=null
if(!!(window.attachEvent && !window.opera)){
//ie
aryData=execScript(result)
}else
{ //not ie
aryData=eval(result)
}
sectionObj.options[0]=new Option("请选择区县",-1)
for(var i=0i<aryData.lengthi++){
var section=aryData[i]
sectionObj.options[i+1]=new Option(section.name,section.id)
}
})
}else{
var sectionObj=document.getElementById("section")
sectionObj.length=0
sectionObj.options[0]=new Option("请选择区县",-1)
sectionObj.value=-1
}
})
})
</script>
服务端
public void getCity() throws Exception {HttpServletResponse res = ServletActionContext.getResponse()
PrintWriter out = res.getWriter()
try {
Map<String, Object> searchMap = new HashMap<String, Object>()
searchMap.put("provinceId", Long.parseLong(provinceId))
cityList = som.getObjectsByParams(CodeoemBncCity.class, searchMap,
null)
if (cityList != null) {
Gson gson = new Gson()
String result = gson.toJson(cityList)
out.print(result)
} else {
System.out.println("没有获取到城市信息：no citys")
}
} catch (Exception e) {
e.printStackTrace()
}finally{
out.flush()
out.close()
}
}
上次一家伙要三级联动我给贴上去了，谁知道没通过规范没发出去，刚好给你贴过来，注意交互部分就好了
因为没有足够的信息，我说几个要点，你看看后台是不是这样的：1.你使用的是 $.getJSON ，这个方法要求你的后台数据 Content-Type 是 text/json 或者 application/json 。如果不是这样的话，肯定不行的
2.回调函数中，myJSON 到底是什么类型，从你的代码来看，它是一个数组，这个数组中的每一个元素都是一个对象，该对象至少有两个属性：professionid 和 professionName .
确认你的数据信息吧，js代码没有什么问题，对了，你是手动触发第一个 select 的 change 事件的，看看你的第一个 select 是不是在触发之前已经有数据了，不然，第一次的触发是没有效果的
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）