利用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();
}
}
}
上一篇： WPF单例运行