客户端利用XMLHttpRequest对象异步传递参数到服务器②服务端接收参数并查询数据库，根据结果集组织JSON数据，然后返回JSON③客户端获取服务器响应后，立即执行回调函数，解析JSON数据，然后加载到页面上示例：①前端页面<!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();}}}
联系客服
