利用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.println(info.toString()); //返回JSON给客户端 out.print(info.toString()); out.flush(); out.close(); }}③数据库操作封装package com.hzp.util;import java.sql.Connection;import java.sql.DriverManager;import java.sql.PreparedStatement;import java.sql.ResultSet;import java.sql.SQLException;public class Database { private Connection conn=null; private PreparedStatement pstmt = null; private ResultSet rs = null; private final String URL="jdbc:mysql://localhost:3306/ajax?user=root&password=515422"; public Database(){ try{ Class.forName("com.mysql.jdbc.Driver").newInstance(); this.conn=DriverManager.getConnection(this.URL); }catch(Exception e){ e.printStackTrace(); } } public ResultSet selectDB(String province){ String sql="select * from address where province=?"; try { pstmt = this.conn.prepareStatement(sql); pstmt.setString(1,province); rs = pstmt.executeQuery(); } catch (SQLException e) { e.printStackTrace(); } return rs; } public void closeDB() { try { if (rs != null) rs.close(); if (pstmt != null) pstmt.close(); if (conn != null) conn.close(); } catch (Exception e) { e.printStackTrace(); } }}?