ajax可以实现页面的局部刷新。

浏览器创建ajax引擎对象,ajax引擎对象向服务器发送请求,服务器把响应好的数据响应给ajax引擎对象,ajax引擎对象把数据放在合适的位置。

      异步:先执行声明函数,再执行监听的响应函数      同步:顺序执行,等着响应函数。

先将基本数据导入数据库:

在组织实体类:

package com.bjsxt.pojo;

public class Area {
private int areaid;
private String areaname;
private int parentid;
private int arealevel;
private int status;
public int getAreaid() {
return areaid;
}
public void setAreaid(int areaid) {
this.areaid = areaid;
}
public String getAreaname() {
return areaname;
}
public void setAreaname(String areaname) {
this.areaname = areaname;
}
public int getParentid() {
return parentid;
}
public void setParentid(int parentid) {
this.parentid = parentid;
}
public int getArealevel() {
return arealevel;
}
public void setArealevel(int arealevel) {
this.arealevel = arealevel;
}
public int getStatus() {
return status;
}
public void setStatus(int status) {
this.status = status;
}
@Override
public String toString() {
return "Area [areaid=" + areaid + ", areaname=" + areaname
+ ", parentid=" + parentid + ", arealevel=" + arealevel
+ ", status=" + status + "]";
}
@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result + areaid;
result = prime * result + arealevel;
result = prime * result
+ ((areaname == null) ? 0 : areaname.hashCode());
result = prime * result + parentid;
result = prime * result + status;
return result;
}
@Override
public boolean equals(Object obj) {
if (this == obj)
return true;
if (obj == null)
return false;
if (getClass() != obj.getClass())
return false;
Area other = (Area) obj;
if (areaid != other.areaid)
return false;
if (arealevel != other.arealevel)
return false;
if (areaname == null) {
if (other.areaname != null)
return false;
} else if (!areaname.equals(other.areaname))
return false;
if (parentid != other.parentid)
return false;
if (status != other.status)
return false;
return true;
}
public Area() {
super();
// TODO Auto-generated constructor stub
}
public Area(int areaid, String areaname, int parentid, int arealevel,
int status) {
super();
this.areaid = areaid;
this.areaname = areaname;
this.parentid = parentid;
this.arealevel = arealevel;
this.status = status;
} }

AreaMapper.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.bjsxt.mapper.AreaMapper">
<select id="selByp" parameterType="int" resultType="Area" >
select * from area where parentid=#{parentid}
</select>
</mapper>

AreaMapper接口:

package com.bjsxt.mapper;

import java.util.List;

import com.bjsxt.pojo.Area;

public interface AreaMapper {
List<Area> selByp(int parentid);
}

AreaService:

package com.bjsxt.service.impl;

import java.util.List;

import org.apache.ibatis.annotations.Param;

import com.bjsxt.pojo.Area;
import com.bjsxt.pojo.Data; public interface AreaService {
List<Area> selByp(int parentid); List<Data> selLike(@Param("title") String title);
}

AreaServiceImpl:

package com.bjsxt.service;

import java.util.List;

import org.apache.ibatis.session.SqlSession;

import com.bjsxt.mapper.AreaMapper;
import com.bjsxt.mapper.DataMapper;
import com.bjsxt.pojo.Area;
import com.bjsxt.pojo.Data;
import com.bjsxt.service.impl.AreaService;
import com.bjsxt.util.MyBatisUtil; public class AreaServiceImpl implements AreaService{ @Override
public List<Area> selByp(int parentid){
SqlSession session = MyBatisUtil.getSession();
AreaMapper mapper = session.getMapper(AreaMapper.class);
List<Area> selByp = mapper.selByp(parentid);
return selByp;
} @Override
public List<Data> selLike(String title) {
SqlSession session = MyBatisUtil.getSession();
DataMapper mapper = session.getMapper(DataMapper.class);
List<Data> selLike = mapper.selLike(title);
session.close();
return selLike;
} }

AreaServlet:

package com.bjsxt.servlet;

import java.io.IOException;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; import com.bjsxt.pojo.Area;
import com.bjsxt.service.AreaServiceImpl;
import com.bjsxt.service.impl.AreaService;
import com.google.gson.Gson; public class AreaServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
int parentid = Integer.parseInt(req.getParameter("parentid"));
AreaService as=new AreaServiceImpl();
List<Area> selByp = as.selByp(parentid);
resp.getWriter().write(new Gson().toJson(selByp)); }
}

工具类:

package com.bjsxt.util;

import java.io.IOException;
import java.io.InputStream; import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder; public class MyBatisUtil {
private static SqlSessionFactory factory=null;
static{
try {
InputStream is = Resources.getResourceAsStream("mybatis-cfg.xml");
factory = new SqlSessionFactoryBuilder().build(is); } catch (IOException e) {
e.printStackTrace();
} }
public static SqlSession getSession() {
SqlSession session =null;
if (factory!=null) {
session = factory.openSession(true);
}
return session;
}
}

mybatis配置文件:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<!-- properties加载配置文件
-->
<properties resource="db.properties"></properties>
<settings>
<setting name="logImpl" value="LOG4J"/>
</settings>
<typeAliases>
<package name="com.bjsxt.pojo"/>
</typeAliases>
<environments default="dev">
<environment id="dev">
<transactionManager type="JDBC"/>
<dataSource type="POOLED">
<property name="driver" value="${jdbc.driver}"/>
<property name="url" value="${jdbc.url}"/>
<property name="username" value="${jdbc.username}"/>
<property name="password" value="${jdbc.password}"/>
</dataSource>
</environment>
</environments>
<mappers >
<package name="com.bjsxt.mapper"/>
</mappers>
</configuration>

三级联动的jsp页面(封装之后的):

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<script type="text/javascript" src="js/j.js"></script>
<script type="text/javascript">
$(function(){
//请求省
getData(0, "pre"); //创建监听请求市
$("#pre").change(function(){
var areaid=$("#pre").val();
getData(areaid, "city");
}); //监听请求县乡
$("#city").change(function(){
var areaid=$("#city").val();
getData(areaid, "town");
}); //封装
function getData(areaid, sid){
//发起ajax请求,请求当前的信息
$.get("area",{parentid:areaid},function(data){
eval("var areas="+data);
var sel=$("#"+sid);
sel.empty();
for(var i=0;i<areas.length;i++){
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
} $("#"+sid).trigger("change");
});
}
}); </script>
</head> <body style="background-color: gray;">
<div style="margin: auto;width: 750px;margin-top: 300px;">
省: <select name="" id="pre" style="width: 200px;height: 30px;"></select>
市: <select name="" id="city" style="width: 200px;height: 30px;"></select>
区\县: <select name="" id="town" style="width: 200px;height: 30px;"></select>
</div>
</body>
</html>

三级联动的jsp页面(未封装的):

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<script type="text/javascript" src="js/j.js"></script>
<script type="text/javascript">
$(function(){
$.get("area",{parentid:0},function(data){
eval("var areas="+data);
var sel=$("#pre");
//清空原有数据
sel.empty;
//遍历获取到的所有ares
for(var i=0;i<areas.length;i++){
//填充,查一个填一个
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
} $("#pre").trigger("change");
}); //创建监听
$("#pre").change(function(){
var areaid=$("#pre").val();
//发起ajax请求,请求当前市的信息
$.get("area",{parentid:areaid},function(data){
eval("var areas="+data);
var sel=$("#city");
sel.empty();
for(var i=0;i<areas.length;i++){
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
} $("#city").trigger("change");
})
}); //监听县乡
$("#city").change(function(){
var areaid=$("#city").val();
$.get("area",{parentid:areaid},function(data){
eval("var areas="+data);
var sel=$("#town");
sel.empty();
for(var i=0;i<areas.length;i++){
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
}
})
})
})
</script>
</head> <body style="background-color: gray;">
<div style="margin: auto;width: 750px;margin-top: 300px;">
省: <select name="" id="pre" style="width: 200px;height: 30px;"></select>
市: <select name="" id="city" style="width: 200px;height: 30px;"></select>
区\县: <select name="" id="town" style="width: 200px;height: 30px;"></select>
</div>
</body>
</html>

效果动态图:

ajax之三级联动(省市县)的更多相关文章

  1. AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动;

    js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...

  2. ajax 实现三级联动

    ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...

  3. 在使用ajax实现三级联动调用数据库数据并通过调出的数据进行二级表单查询

    在使用ajax实现三级联动查询数据库数据后再使用ajax无刷新方式使用三级联动调出的数据进行二级查询 但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...

  4. ajax 实现三级联动下拉菜单

    ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...

  5. PHP ajax 实现三级联动

    在一个单独JS页面中,利用ajax实现三级联动,做成一个三级联动形式,以便于以后随时调用 JS代码: $(document).ready(function(e) { $("#sanji&qu ...

  6. 基于jQuery的AJAX实现三级联动菜单

    最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录. 下面是嵌套js的html文件: <!DOCTYPE html> <html ...

  7. ajax省市区三级联动

    jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...

  8. 完整的Ajax及三级联动小练习

    Ajax结构: var name = $("#text_1").val(); $.ajax({ url: "Ashxs/Handler.ashx",//一般处理 ...

  9. Ajax实现三级联动(0520)

    查询数据库中的chinastates表,通过父级代号查询相应省市区. 实现界面: 在js页面实现三级联动 在JQuery中调用Ajax方法(引用JQuery文件一定放在最上面) 用插件的形式,创建三个 ...

随机推荐

  1. vue之注册自定义的全局js方法

    前端开发的时候,总会需要写一些js方法,在vue框架中为了方便使用,可以考虑注册一个全局的js方法,下面是注册步骤: 1.0 可以在assets文件中的js文件下面新建一个js文件,如:yun.js- ...

  2. windsServer2008设置定时重启

    点击“开始”——“管理工具”——“任务计划程序”. 右键“任务计划程序库”——“创建任务”. 输入计划名称.描述和安全选项(如下图). 点击触发器,点击“新建…”,输入计划周期和时间(如下图):无误后 ...

  3. static静态关键字

    转载自大佬:https://www.cnblogs.com/xrq730/p/4820992.html 静态资源和静态方法 首先,静态的资源和方法等会随着类的加载而进入内存被初始化,而非静态的资源和方 ...

  4. JS 原生面经从入门到放弃 篇幅较长,建议收藏

    前言 是时候撸一波 JS 基础啦,撸熟了,银十速拿 offer; 本文不从传统的问答方式梳理,而是从知识维度梳理,以便形成知识网络; 包括函数,数组,对象,数据结构,算法,设计模式和 http. 函数 ...

  5. [LC]876题 Middle of the Linked List (链表的中间结点)(链表)

    ①中文题目 给定一个带有头结点 head 的非空单链表,返回链表的中间结点. 如果有两个中间结点,则返回第二个中间结点. 示例 1: 输入:[1,2,3,4,5]输出:此列表中的结点 3 (序列化形式 ...

  6. flume安装和介绍

    一.安装1.flume-ng-1.5.0-cdh5.3.6.tar.gz 下载链接:https://pan.baidu.com/s/1AWPGP2qnY6_VpYr_iSnJ3w 密码:tiog2.对 ...

  7. Windows服务的删除与添加

    Windows服务的删除与添加 以管理员身份运行 CMD 服务的删除 sc delete 服务名称 服务添加 sc create 服务名称 binpath="服务EXE文件所在的目录&quo ...

  8. VLAN实验(3)

    1.选择2台S3700和5台pc机,并根据实验编址完成此拓扑图. 2.启动设备,检查设备的连通性: 由于现在我们还没有划分VLAN,这5台PC,还在同一个VLAN中,现在我们启动所有的设备,这是所有的 ...

  9. Spring Boot2 系列教程(二十六)Spring Boot 整合 Redis

    在 Redis 出现之前,我们的缓存框架各种各样,有了 Redis ,缓存方案基本上都统一了,关于 Redis,松哥之前有一个系列教程,尚不了解 Redis 的小伙伴可以参考这个教程: Redis 教 ...

  10. 023.掌握Pod-Pod扩容和缩容

    一 Pod的扩容和缩容 Kubernetes对Pod的扩缩容操作提供了手动和自动两种模式,手动模式通过执行kubectl scale命令或通过RESTful API对一个Deployment/RC进行 ...