3级联动 ajax java_AJAX 三级联动例题

用ajax三级联动写一个关于省市区下拉列表的联动

数据库中的表：

id是这条数据的主键，dname是地区名称，parentid是父级id

页面效果：

先实例化一个district类

package com.hanqi.model;

public class District {

private String id;

private String dname;

private String parentid;

public District(String id, String dname, String parentid) {

super();

this.id = id;

this.dname = dname;

this.parentid = parentid;

}

public District() {

super();

// TODO Auto-generated constructor stub

}

public String getId() {

return id;

}

public void setId(String id) {

this.id = id;

}

public String getDname() {

return dname;

}

public void setDname(String dname) {

this.dname = dname;

}

public String getParentid() {

return parentid;

}

public void setParentid(String parentid) {

this.parentid = parentid;

}

}

连接数据库：

package com.hanqi.util;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.sql.SQLException;

public class DBHelper {

private static final String USERNAME = "test0315";

private static final String PASSWORD = "123456";

private static final String URL = "jdbc:oracle:thin:@localhost:1521:xe";

private static final String CLASSNAME = "oracle.jdbc.OracleDriver";

static {

try {

Class.forName(CLASSNAME);

} catch (ClassNotFoundException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

}

public static Connection getConnection() {

Connection conn = null;

try {

conn = DriverManager.getConnection(URL, USERNAME, PASSWORD);

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

return conn;

}

public static void destroy(Connection conn,PreparedStatement ps,ResultSet rs) {

if(rs != null) {

try {

rs.close();

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

rs = null;

}

if(conn != null) {

try {

conn.close();

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

conn = null;

}

if(ps != null) {

try {

ps.close();

} catch (SQLException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

ps = null;

}

}

public static void main(String[] args) {

System.out.println(getConnection());

}

}

数据库访问对象：

package com.hanqi.dao;

import java.sql.Connection;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.util.ArrayList;

import java.util.List;

import javax.security.auth.Destroyable;

import com.hanqi.model.District;

import com.hanqi.util.DBHelper;

public class Basedao {

private Connection conn;

private PreparedStatement ps;

private ResultSet rs;

private ResultSet initQuery(String sql, Object... objects) throws SQLException {

conn = DBHelper.getConnection();

ps = conn.prepareStatement(sql);

setParam(ps, objects);

return ps.executeQuery();

}

private void setParam(PreparedStatement ps, Object[] objects) throws SQLException {

int i = 1;

for (Object o : objects) {

ps.setObject(i, o);

i++;

}

}

public List selectdistrict(String parentid) throws SQLException {

List list = new ArrayList<>();

String sql = "select * from c_district where parentid = ?";

rs = initQuery(sql, parentid);

while (rs.next()) {

District dt = new District();

dt.setId(rs.getString("id"));

dt.setDname(rs.getString("dname"));

dt.setParentid(rs.getString("parentid"));

list.add(dt);

}

DBHelper.destroy(conn, ps, rs);

return list;

}

}

servlet类：

package com.hanqi.servlet;

import java.io.IOException;

import java.sql.SQLException;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSONObject;

import com.hanqi.dao.Basedao;

import com.hanqi.model.District;

/**

* Servlet implementation class FindServlet

*/

@WebServlet("/FindServlet")

public class FindServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

public FindServlet() {

super();

// TODO Auto-generated constructor stub

}

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

String parentid = request.getParameter("parentid");

request.setCharacterEncoding("utf-8");

response.setCharacterEncoding("utf-8");

response.setContentType("text/html;charset:utf-8");

Basedao bd = new Basedao();

JSONObject jo = new JSONObject();

List list = null;

try {

list = bd.selectdistrict(parentid);

} catch (SQLException e) {

e.printStackTrace();

}

if (list != null && list.size() > 0) {

jo.put("success", true);

jo.put("result", list);

} else {

jo.put("seccess", false);

}

response.getWriter().write(jo.toJSONString());

}

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

// TODO Auto-generated method stub

doGet(request, response);

}

}

JSP页面：

pageEncoding="UTF-8"%>

Insert title here

省:

===请选择===

市:

===请选择===

区:

===请选择===

JS页面：

$(function() {//$() 此方法代表当JSP页面元素全部加载完成后再执行JS脚本

$.ajax({//ajax方法调用，通过此方法接收前端信息发往后台并接受后台信息显示在前端

type : "post",//发送请求的方式：post/get

url : "FindServlet",//接收请求的地址

dataType : "json",//接收后台数据的类型：text，html，json，xml

data:{//这个ajax请求所携带的参数，是指前端的数据请求，以键值对方式存储，为可选项；

parentid:"0"

},

success : function(data) {//当这个请求成功发送到后台时执行的方法，这里的data参数是指后台响应后发送来的字符串类型的数据；

if (data.success) {//

for (var i = 0; i < data.result.length; i++) {

var district = data.result[i];//将数据里的对象遍历取出

$("#province").append(//添加下拉选项

""//将id作为选项的值

+ district.dname + "");

}

}

},

error : function(msg) {//请求失败时执行的方法；

}

});

$("#province").change(//当该选择器改变时执行该方法

function() {//封装一个方法

var provinceid = $(this).val();//获取该选项的值作为请求参数，this代表这个选择器；

$.ajax({

type : "post",

url : "FindServlet",

data : {

parentid : provinceid

},

dataType : "json",

success : function(data) {

if (data.success) {

$("#city").empty();//先将次级选项初始化，再添加下拉数据

$("#city").append("==请选择==");

$("#area").empty();

$("#area").append("===请选择===");

for (var i = 0; i < data.result.length; i++) {

var district = data.result[i];

$("#city").append(

""

+ district.dname + "");

}

} else {//如果查询不到数据也要对选项初始化，即清空

$("#city").empty();

$("#city").append("==请选择==");

$("#area").empty();

$("#area").append("===请选择===");

}

},

error : function() {

}

});

});

$("#city").change(

function(){

var cityid = $(this).val();

$.ajax({

type :"post",

url:"FindServlet",

data:{

parentid:cityid

},

dataType:"json",

success:function(data){

if(data.success){

$("#area").empty();

$("#area").append("===请选择===");

for(var i = 0;i

var district = data.result[i];

$("#area").append

(""+district.dname+"")

}

}else{

$("#area").empty();

$("#area").append("===请选择===");

}

},

error:function(msg){

alert("查询错误！");

}

});

}

);

});

JS页面第二种写法：

$(function() {

getData("0", "#province");//调用方法，将参数传进去

$("#province").change(function() {

var provinceid = $(this).val();

getData(provinceid, "#city");

});

$("#city").change(function() {

var cityid = $(this).val();

getData(cityid, "#area");

});

})

var getData = function(parentid, selector) {//将方法命名

$.ajax({

type : "post",

url : "FindServlet",

data : {

parentid : parentid

},

dataType : "json",

success : function(data) {

if (data.success) {

$(selector).empty();

$(selector).append("===请选择===");

$(selector + "select").empty();//获取该选择器后面紧挨的选择器，并清空

$(selector + "select").append("===请选择===");

for (var i = 0; i < data.result.length; i++) {

var district = data.result[i];

$(selector).append(

""

+ district.dname + "");

};

}else{

$(selector).empty();

$(selector).append("===请选择===");

$(selector + "select").empty();

$(selector + "select").append("===请选择===");

}

},

error : function(msg) {

alert("查询失败！")

}

});

}