利用JSON实现Ajax动态加载上拉列表框
日期：2014-05-16 浏览次数：20320 次
利用JSON实现Ajax动态加载下拉列表框
①客户端利用XMLHttpRequest对象异步传递参数到服务器 ②服务端接收参数并查询数据库，根据结果集组织JSON数据，然后返回JSON ③客户端获取服务器响应后，立即执行回调函数，解析JSON数据，然后加载到页面上 示例：
xmlhttp.js文件
var xmlHttp=false;
function createXMLHttpRequest(){
if(window.ActiveXObject){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(ee){
xmlHttp=false;
}
}
}else if(window.XMLHttpRequest){
try{
xmlHttp=new XMLHttpRequest();
}catch(e){
xmlHttp=false;
}
}
}
①前端页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script language="javascript" src="js/xmlhttp.js"></script>
<script language="javascript">
function submit(){
if(document.getElementById('province').options[document.getElementById('province').selectedIndex].value==0){
alert("请选择省份");
return false;
}else{
createXMLHttpRequest();
xmlHttp.onreadystatechange=callback;
xmlHttp.open("post","/Ajax/ActionServlet");
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlHttp.send("province="+document.getElementById('province').options[document.getElementById('province').selectedIndex].value);
return true;
}
}
function callback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var json=new Object();
json=eval("("+xmlHttp.responseText+")");
//清空上次的记录
while(document.getElementById('city').options.length>0){
document.getElementById('city').options.remove(0);
}
//动态添加数据
for(var i=0;i<json.province.length;i++){
var o=document.createElement('OPTION');
o.text=json.province[i].city;
o.value=json.province[i].city;
document.getElementById('city').add(o);
}
}
}
}
</script>
</head>
<body>
<select name="province" id="province" onchange="return submit()">
<option value="0">
选择省份
</option>
<option value="广东">
广东
</option>
<option value="海南">
海南
</option>
</select>
<select name="city" id="city">
</select>
</body>
</html>
②服务器端处理
package com.hzp.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.hzp.util.Database;
public class ActionServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("dopost");
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
//获取参数
String province=request.getParameter("province");
System.out.println(province);
//查询数据库
Database db=new Database();
ResultSet rs=db.selectDB(province);
//组织JSON字符字面量
StringBuffer info=new StringBuffer();
//JSON格式开始
info.append("{province:[");
try {
while(rs.next()){
System.out.println(rs.getString("city"));
info.append("{city:'");
info.append(rs.getString("city"));
info.append("'},");
}
//去掉最后那个逗号
info.delete(info.length()-1,info.length());
//JSON格式结尾
info.append("]}");
rs.close();
db.closeDB();
} catch (SQLException e) {
e.printStackTrace();
}
System.out.printl
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
