您的位置：首页 > Web前端 > JavaScript

ajax 的json联动

2015-11-03 15:33 531 查看

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//text/html,  text/xml,   text/text
response.setContentType("text/html;charset=utf-8");
Dao dao = new Dao();
List<Provincename> province = dao.findAllProvince();
String json = JSONArray.fromObject(province).toString();
response.getWriter().print(json);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
int pid = Integer.parseInt(request.getParameter("pid"));
System.out.println("pid="+pid);
Dao dao = new Dao();

List<Cityname> cityList = dao.findByProvince(pid);

String json = JSONArray.fromObject(cityList).toString();
System.out.println(json);

response.getWriter().print(json);
}

<script type="text/javascript">
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();//大多数浏览器
} catch (e) {
try {
return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
} catch (e) {
try {
return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本
} catch (e) {
alert("哥们儿，您用的是什么浏览器啊？");
throw e;
}
}
}
}

window.onload = function() {
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("GET", "<c:url value ='/ProvinceServlet'/>", true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function() {

if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var proArray  = eval("("+ xmlHttp.responseText+")") ;
for(var i = 1;i<proArray.length;i++){
var pro = proArray[i];//pro是每一个省
var optionEle = document.createElement("option");
optionEle.value = pro.pid;
var textNode = document.createTextNode(pro.name);
optionEle.appendChild(textNode);
document.getElementById("p").appendChild(optionEle);
}

}

};

var proSelect = document.getElementById("p");
proSelect.onchange = function() {

var xmlHttp = createXMLHttpRequest();
xmlHttp.open("POST", "<c:url value = '/CityServlet'/>", true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xmlHttp.send("pid=" + this.value);
xmlHttp.onreadystatechange = function() {

if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var citySelect = document.getElementById("c");
var optionEleList = citySelect.getElementsByTagName("option");
while (optionEleList.length > 1) {
citySelect.removeChild(optionEleList[1]);
}

var cityArray = eval("("+xmlHttp.responseText+")");

for(var i = 0;i<cityArray.length;i++){
var city = cityArray[i];
var optionEle = document.createElement("option");
optionEle.value = city.cid;
var textNode = document.createTextNode(city.name);
optionEle.appendChild(textNode);
citySelect.appendChild(optionEle);
}
}
};
};

};
</script>

</head>
<body>
<h1>省市联动</h1>
<select name="province" id="p">
<option>===请选择省===</option>
</select>

<select name="city" id="c">
<option>===请选择市===</option>
</select>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航