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<District> selectdistrict(String parentid) throws SQLException {
		List<District> 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<District> 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页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<title>Insert title here</title>
</head>
<body>
 省:<select id="province">
 	<option>===请选择===</option>
 </select>
 市:<select id="city">
 	<option>===请选择===</option>
 </select>
 区:<select id="area">
 	<option>===请选择===</option>
 </select>
</body>
</html>

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(//添加下拉选项
							"<option value=‘" + district.id + "‘>"//将id作为选项的值
									+ district.dname + "</option>");
				}
			}
		},
		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("<option>==请选择==</option>");
							$("#area").empty();
							$("#area").append("<option>===请选择===</option>");
							for (var i = 0; i < data.result.length; i++) {
								var district = data.result[i];
								$("#city").append(
										"<option value=‘" + district.id + "‘>"
												+ district.dname + "</option>");
							}
						} else {//如果查询不到数据也要对选项初始化，即清空
							$("#city").empty();
							$("#city").append("<option>==请选择==</option>");
							$("#area").empty();
							$("#area").append("<option>===请选择===</option>");
						}
					},
					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("<option>===请选择===</option>");
						for(var i = 0;i<data.result.length;i++){
							var district = data.result[i];
							$("#area").append
							("<option value=‘"+ district.id+"‘ >"+district.dname+"</option>")
						}

					}else{
						$("#area").empty();
						$("#area").append("<option>===请选择===</option>");
					}
				},
				error:function(msg){
					alert("查询错误！");
				}
			});
		}
	);

});

原文地址：https://www.cnblogs.com/wyc1991/p/9164980.html

时间： 2024-10-07 14:02:34

AJAX 三级联动例题的相关文章

ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2在js中用keyup事件来进行操作 3创建ajax格式和内容:格式: $.ajax({ url:"哪一个服务端处理器", data:{"自己起名",所需要传给处理器的数据}, type:"post", dataType:"json"

MVC5+Ajax三级联动

1.在这里我准备三张表给大家写一个关于三级联动(省,市,区) 2.不多说看代码 controlers代码: 1 public class S_ProvinceController : Controller 2 { 3 private readonly IS_ProvinceService _provinceService; 4 private readonly IS_CityService _cityService; 5 private readonly IS_DistrictService _

使用 AJAX + 三级联动 实现分类出全国各地的省，市，区

使用AJAX + 三级联动  实现分类出全国各地的省,市,区 也可以将下面的显示页面所写的 function循环,封装成js文件,就是在写代码软件里创建一个js文件,就和创建一个HTML或php文件一样.直接在显示页面引用! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

jquery json ajax三级联动

province_city_area.jsp 1 <%@ page language="java" pageEncoding="UTF-8"%> 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 3 <html> 4 <head> 5 <script type="text/javascript"

ajax三级联动下拉菜单

ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过ajax发出请求传递到服务端的程序中 (2)比如取中国地域,中国是0001,那么自带号为0001的便是中国地域: 北京的代号为11,那么子代号为11的便是北京时的市区, 也就是说根据主代号查询子代号: (3)服务端根据客户端的请求,查询数据库,并按照一定的格式返回给客户端 显示页面非常简单,只需要一

example_ThinkPHP+AJAX三级联动

sanji.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <load href ="__PUBLIC__/JQ/jquery-1.12.4.min.js"/> </head> <body> <h1&

第七十二天上课 ajax三级联动插件

js(界面)threeLinkage.js $(document).ready(function() { $('#threeLinkage').html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); //向主界面填充三个下拉列表 fill('0001','#sheng'); //填充一级下拉列表

ajax 三级联动商品分类（转载）

转载  自  jines     http://www.cnblogs.com/lijinblogs/p/5759399.html 思路分析:效果:当页面加载时,利用ajax异步向后台请求数据,加载一级商品类别,当选择一级商品时加载二级商品,选择二级商品加载三级商品. 实现:1.当拿到数据后加载pid为0的商品,并动态创建option将商品追加到一级菜单中,并设置value值2.当选择一级商品时加载pid=当前id的商品,并创建option将商品追加到二级菜单中,并设置value值3.当选择二级

AJAX 三级联动

html代码 <select id="str1"> <option>加载中...</option> </select> <select id="str2"> <option>加载中...</option> </select> <select id="str3"> <option>加载中...</option> <