有关于用java实现ajax的省市联动

最新推荐文章于 2019-04-09 13:10:00 发布

GoudaEdam

最新推荐文章于 2019-04-09 13:10:00 发布

阅读量2k

点赞数 1

文章标签： ajax java

本文链接：https://blog.csdn.net/lvliu212/article/details/50231739

版权

本文详细介绍了如何使用Java和Ajax实现省市联动效果。首先展示了一个包含省市区选择的JSP页面，通过Ajax调用DAO层获取省市区数据。在DAO层中，使用jdbc连接数据库，查询省市区信息。在JavaScript部分，展示了创建XMLHttpRequest对象，发送请求并处理响应的代码。整个过程涉及数据库连接、SQL查询、XMLHttpRequest的使用以及Servlet的交互。

摘要由CSDN通过智能技术生成

ajax这种东西自己不想说了百度一下有很多写这个也是感觉做这个复习了很多知识有必要记录一下（本人只是实习生一枚）

首先要写一个jsp（其实也是找了很多资料才完成的）

<%@ page language="java" import="java.util.*,com.dao.*,com.vo.*" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%   //这个是调用dao层返回省表中的内容。
    UserDao ud=new UserDao();
    ArrayList<Sheng> list=(ArrayList)ud.select();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<form action="" method="post" name="form1">
    <select id="slt1" οnchange="updateSelect()">
      <option>请选择省份</option>
      <%
        Sheng sheng=null;
      for(int i = 0;i<list.size();i++){
          sheng=(Sheng)list.get(i);
      %>
      <option value="<%=sheng.getId()%>"><%=sheng.getName() %></option>
      <%
      }
      %>
    </select>
    <select id="slt2">
      <option value="">请选择城市</option>
    </select>
</form>
</body>
</html>

这里首先需要在dao里找到sheng表中的信息，所以当然啦还要建一个sheng的表，还要写一个jdbc连接数据库

连接数据库代码：public class DBUtil {

    /**
     * @return conn
     * @throws ClassNotFoundException ClassNotFoundException
     * @throws SQLException SQLException
     */
    public static Connection getConnection() throws ClassNotFoundException, SQLException {
        Connection conn = null;
        Class.forName("oracle.jdbc.driver.OracleDriver");// 实例化oracle数据库驱动程序(建立中间件)
        String url = "jdbc:oracle:thin:@localhost:1521:xe";// @localhost为服务器名，xe为数据库实例名
        conn = DriverManager.getConnection(url, "1", "2");// 连接数据库，1代表帐户,2代表密码

        return conn;
    }

}

实例名一点要找对！！！困扰我好久，数据库可直接查看！！！

再就是dao层代码：public ArrayList<Sheng> select() throws ClassNotFoundException,
        SQLException {
        Connection conn = DBUtil.getConnection();
        // 创建Statement
        Statement s = conn.createStatement();
        // 执行SQL语句
        String sql = "select * from sheng";
        // 处理结果集
        ResultSet rs = s.executeQuery(sql);
        ArrayList<Sheng> list = new ArrayList<Sheng>();
        while (rs.next()) {
            Sheng s1 = new Sheng();
            s1.setId(rs.getString("id"));
            s1.setName(rs.getString("name"));
            list.add(s1);

        }

        // 关闭
        rs.close();
        s.close();
        conn.close();
        return list;

    }这是查找sheng表中的数据

在jsp中通过

<%   //这个是调用dao层返回省表中的内容。
    UserDao ud=new UserDao();
    ArrayList<Sheng> list=(ArrayList)ud.select();
%>找到

点击下拉框中的随便一个省，促发οnchange="updateSelect()"中的时间到js中

js代码：

//访问浏览器的设置因为现在ie5.6基本不存在直接省略了那两个版本的XMLRequest
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
    return new XMLHttpRequest();
}
}
function createAjaxObj() {
var httprequest = false;
if (window.XMLHttpRequest) {
    httprequest = new XMLHttpRequest();
    if (httprequest.overrideMimeType) {
      httprequest.overrideMimeType("text/xml");
    }
} else {
    if (window.ActionXObject) {
      try {
        httprequest = new ActionXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          httprequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
        }
      }
    }
}
return httprequest;
}
var httpReq = createAjaxObj();

function updateSelect() {
getXmlHttpRequestObject();
var selected = document.all.slt1.value;
httpReq.onreadystatechange = checkReqCallBack;
httpReq.open("GET", "testU?tid=" + selected, true);
httpReq.onreadystatechange = function() {
    checkReqCallBack();
};
httpReq.send(null);
}
function checkReqCallBack() {
if (httpReq.readyState == 4) {
    if (httpReq.status == 200) {
      var xmlDoc = httpReq.responseXML.documentElement;// 获得返回的XML文档
      var xSel = xmlDoc.getElementsByTagName('select');// 获得XML文档中的所有<select>标记
      var select_root = document.getElementById('slt2');// 获得网页中的第二个下拉框
      select_root.options.length = 0; // 每次获得新的数据的时候先把每二个下拉框架的长度清0

      for (var i = 0; i < xSel.length; i++) {
        var xValue = xSel[i].childNodes[0].firstChild.nodeValue;// 获得每个<select>标记中的第一个标记的值,也就是<value>标记的值
        var xText = xSel[i].childNodes[1].firstChild.nodeValue;// 获得每个<select>标记中的第二个标记的值,也就是<text>标记的值

        var option = new Option(xText, xValue);// 根据每组value和text标记的值创建一个option对象

        try {
          select_root.add(option);// 将option对象添加到第二个下拉框中
        } catch (e) {
        }
      }
    } else {
      alert("不能得到描述信息:" + httpReq.statusText);
    }
}
}

httpReq.open("GET", "testU?tid=" + selected, true);这句话是和servlet的连接将得到的tid传给你的servlet，我的servlet叫TestU

servlet代码：package com.dao;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;

import com.tools.DBUtil;
import com.vo.Sheng;
import com.vo.Shi;

/**
* UserDao
*/
public class UserDao {
    /**
     * @return list
     * @throws ClassNotFoundException ClassNotFoundException
     * @throws SQLException SQLException
     */
    public ArrayList<Sheng> select() throws ClassNotFoundException,
        SQLException {
        Connection conn = DBUtil.getConnection();
        // 创建Statement
        Statement s = conn.createStatement();
        // 执行SQL语句
        String sql = "select * from sheng";
        // 处理结果集
        ResultSet rs = s.executeQuery(sql);
        ArrayList<Sheng> list = new ArrayList<Sheng>();
        while (rs.next()) {
            Sheng s1 = new Sheng();
            s1.setId(rs.getString("id"));
            s1.setName(rs.getString("name"));
            list.add(s1);

        }

        // 关闭
        rs.close();
        s.close();
        conn.close();
        return list;

    }

    /**
     * @param tid tid
     * @return list
     * @throws ClassNotFoundException ClassNotFoundException
     * @throws SQLException SQLException
     */
    public ArrayList<Shi> check(String tid) throws ClassNotFoundException,
        SQLException {
        Connection conn = DBUtil.getConnection();
        // 创建Statement
        Statement s = conn.createStatement();
        // 执行SQL语句
        String sql = "select * from shi where id=" + tid;
        // 处理结果集
        ResultSet rs = s.executeQuery(sql);
        ArrayList<Shi> list = new ArrayList<Shi>();
        while (rs.next()) {
            Shi s1 = new Shi();
            s1.setId(rs.getString("id"));
            s1.setName(rs.getString("name"));
            list.add(s1);

        }

        // 关闭
        rs.close();
        s.close();
        conn.close();
        return list;

    }

}

采用的是xml解析方式将数据返还给js，但是接收到数据时，还需要调用dao层（至于web。xml中关于servlet的配置，就不说了，没有不会的吧）

dao层中市的查询：public ArrayList<Shi> check(String tid) throws ClassNotFoundException,
        SQLException {
        Connection conn = DBUtil.getConnection();
        // 创建Statement
        Statement s = conn.createStatement();
        // 执行SQL语句
        String sql = "select * from shi where id=" + tid;
        // 处理结果集
        ResultSet rs = s.executeQuery(sql);
        ArrayList<Shi> list = new ArrayList<Shi>();
        while (rs.next()) {
            Shi s1 = new Shi();
            s1.setId(rs.getString("id"));
            s1.setName(rs.getString("name"));
            list.add(s1);

        }

        // 关闭
        rs.close();
        s.close();
        conn.close();
        return list;

    }