欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

利用JSON实现Ajax动态加载下拉列表框

程序员文章站 2022-07-13 22:31:25
...
①客户端利用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();
  }
 }
}