jQuery中的ajax异步请求的处理方式实现省份的三级联动

最新推荐文章于 2022-07-28 20:50:40 发布

劈你的雷正在路上

最新推荐文章于 2022-07-28 20:50:40 发布

阅读量221

点赞数 1

分类专栏： ajax 文章标签： jquery ajax servlet

本文链接：https://blog.csdn.net/yangchaoxu111/article/details/107945586

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、使用ajax方式

$ajax({
	type: xxx,       //请求方式类型，post  get
	url: xxx,        //请求路径
	async:true, 	 //异步还是同步，默认异步
	data:xxx,   	 //发送到服务器上的参数
	dataType:"json",    //指定服务器响应的数据类型
	success:function(xxx){  //回调函数
		xxxxxx	
	}
})

2、使用post方式

 $.post(url,data,function,dataType)

3、使用get方式

 $.post(url,function,dataType)

4、做一个省份，城市，区县下拉列表

4.1、写servlet

4.1.1、ProServlet

public class ProServlet extends BaseServlet {
	
	public void pro(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		//
		ProDao proDao = new ProDaoImpl();
		List<Pro> list = proDao.searchAll();
		//调用阿里的fastjson
		String result = JSON.toJSON(list).toString();
		
		//设置响应头信息
		resp.setContentType("text/plain;charset=UTF-8");
		
		PrintWriter out = resp.getWriter();
		out.write(result);
	}

}

4.1.2、CityServlet

public class CityServlet extends BaseServlet {
	
	public void city(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		//获得省份的id
		String pid = req.getParameter("pid");
		CityDao cityDao = new CityDaoImpl();
		//根据省份的id查询城市
		List<City> list = cityDao.searchByPid(Integer.parseInt(pid));
		
		
		String result = JSON.toJSON(list).toString();
		
		//设置响应头信息
		resp.setContentType("text/plain;charset=UTF-8");
		
		PrintWriter out = resp.getWriter();
		out.write(result);
	}

}

4.1.3、AreaServlet

public class AreaServlet extends BaseServlet {
	
	public void area(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		//获得城市的id
		String cid = req.getParameter("cid");
		AreaDao areaDao = new AreaDaoImpl();
		//根据城市的id查询区县
		List<Area> list = areaDao.searchByCid(Integer.parseInt(cid));	
		
		String result = JSON.toJSON(list).toString();
		
		//设置响应头信息
		resp.setContentType("text/plain;charset=UTF-8");
		
		PrintWriter out = resp.getWriter();
		out.write(result);
	}

}

4.2 配置Servlet

  <servlet>
  	<servlet-name>proServlet</servlet-name>
  	<servlet-class>com.yang.servlet.ProServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>proServlet</servlet-name>
  	<url-pattern>/pro</url-pattern>
  </servlet-mapping>
 
 <servlet>
  	<servlet-name>cityServlet</servlet-name>
  	<servlet-class>com.yang.servlet.CityServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>cityServlet</servlet-name>
  	<url-pattern>/city</url-pattern>
  </servlet-mapping>
  
  <servlet>
  	<servlet-name>areaServlet</servlet-name>
  	<servlet-class>com.yang.servlet.AreaServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>areaServlet</servlet-name>
  	<url-pattern>/area</url-pattern>
  </servlet-mapping>

4.3 前端页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">	

	function loadPro(){
		var pro = $("#pid");
	    $.ajax({
	        type:"get",
	        url:"pro",
	        async:true,
	        data:"op=pro",
	        dataType:"json",
	        success:function(result){
	            $.each(result, function(index, item){
	                pro.append("<option value='"+item.id+"'>"+item.pname+"</option>")
	            })
	        }
	
	    })
	}

	function loadCity(){
		var city = $("#cid");
		var pid = $("#pid").val();
	    $.post("city", "op=city&pid="+pid,      
	        function(result){
	        	city.html("<option value='0'> --请选择--</option>");
	            $.each(result, function(index, item){
	            	city.append("<option value='"+item.id+"'>"+item.cname+"</option>");
	            })
	        },"json")
	}

	//加载区县的信息
	function loadArea(){
		//获得区县的下拉列表框对象
		var area = $("#aid");
		//获得城市的id
		var cid = $("#cid").val();
	    $.get("area?op=area&cid="+cid,      
	        function(result){
	        	area.html("<option value='0'> --请选择--</option>");
	            $.each(result, function(index, item){
	            	area.append("<option value='"+item.id+"'>"+item.aname+"</option>");
	            })
	        },"json")
	}

</script>
</head>
<body onload="loadPro()">
	
	
	
		<div>
			省份
			<select name="pid" id="pid" onchange="loadCity()">
				<option value="0"> --请选择--</option>
			</select>
			城市
			<select name="cid" id="cid"  onchange="loadArea()">
				<option value="0"> --请选择--</option>
			</select>
			区县
			<select name="aid" id="aid">
				<option value="0"> --请选择--</option>
			</select>
		
		</div>
</body>
</html>