这里写目录标题

Ajax & Jquery

Ajax & Jquery

1. Ajax概念

Ajax：(Asynchronous JavaScript And XML)指异步 JavaScript 及 XML。不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS新用法

Ajax：只刷新局部页面的技术

JavaScript：更新局部的网页
XML：一般用于请求数据和响应数据的封装
XMLHttpRequest对象：发送请求到服务器并获得返回结果
CSS：美化页面样式
异步：发送请求后不等返回结果，由回调函数处理结果

JavaScript中XMLHttpRequest对象是整个Ajax技术的核心
，它提供了异步发送请求的能力

同时，不同浏览器，甚至相同浏览器的不同版本，获取该对象的方式是不同的。

在这里插入图片描述

1.1 常用方法

1.1.1 方法

open() “get|post” ，“url?name=tom” ，“true|false”
send() 发送请求。可以带参数或 null
setRequestHeader()

在这里插入图片描述

1.1.2 属性

readyState：类型short；只读
responseText：类型String；只读
responseXML：类型Document；只读
status：类型short；只读

readyState: XMLHttpRequest的状态信息

在这里插入图片描述

status：HTTP的状态码

在这里插入图片描述

responseText：获得响应的文本内容

responseXML：获得响应的XML文档对象 documednt

注：就绪状态是4而且状态码是200，才可以处理服务器数据

使用Ajax验证用户名是否存在实现步骤：

使用文本框的onBlur事件
使用Ajax技术实现异步交互
1. 创建XMLHttpRequest对象
2. 通过 XMLHttpRequest对象设置请求信息
3. 向服务器发送请求
4. 创建回调函数，根据响应状态动态更新页面

1.1.3 事件处理器

onreadystatechange 指定回调函数

1.2 数据请求

1.2.1 Get

1.创建对象

function  ajaxFunction(){
	var xmlHttp;
	try{ // Firefox, Opera 8.0+, Safari
		xmlHttp=new XMLHttpRequest();
	}
	catch (e){
		try{// Internet Explorer
	 		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e){
		try{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch (e){}
		}
	}		
	return xmlHttp;
}

发送请求

//执行get请求
function get() {
		
	//1. 创建xmlhttprequest 对象
	var request = ajaxFunction();
		
	//2. 发送请求。
	// http://localhost:8080/day16/demo01.jsp
	//http://localhost:8080/day16/DemoServlet01
		
	/*	
		参数一： 请求类型  GET or  POST
		参数二： 请求的路径
		参数三： 是否异步， true  or false
	*/
	request.open("GET" ,"/day16/DemoServlet01" ,true );
	request.send();
}

如果发送请求的同时，还想获取数据，那么代码如下

//执行get请求
function get() {
		
	//1. 创建xmlhttprequest 对象
	var request = ajaxFunction();
		
	//2. 发送请求
	request.open("GET" ,"/day16/DemoServlet01?name=aa&age=18" ,true );
		
	//3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
	request.onreadystatechange = function(){
			
		//前半段表示 已经能够正常处理。  再判断状态码是否是200
		if(request.readyState == 4 && request.status == 200){
			//弹出响应的信息
			alert(request.responseText);
		}
	}
	request.send();
}

1.2.2 Post

<script type="text/javascript">

	//1. 创建对象
	function  ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
		   try{// Internet Explorer
		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }
		    catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      catch (e){}
		      }
	    }
	
		return xmlHttp;
	 }
	
	function post() {
		//1. 创建对象
		var request = ajaxFunction();
		
		//2. 发送请求
		request.open( "POST", "/day16/DemoServlet01", true );
	
		//如果不带数据，写这行就可以了
		//request.send();
		
		//如果想带数据，就写下面的两行
		
		//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		
		//带数据过去  ， 在send方法里面写表单数据。 
		request.send("name=aobama&age=19");
	}
</script>

1.2.3 数据获取

<script type="text/javascript">
	function post() {
		//1. 创建对象
		var request = ajaxFunction();
			
		//2. 发送请求
		request.open( "POST", "/day16/DemoServlet01", true );
			
		//想获取服务器传送过来的数据， 加一个状态的监听。 
		request.onreadystatechange=function(){
			if(request.readyState==4 && request.status == 200){	
				alert("post："+request.responseText);
			}
		}
			
		//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			
		//带数据过去， 在send方法里面写表单数据。 
		request.send("name=aobama&age=19");
	}
</script>

2. Ajax案例【校验用户名是否可用】

2.1 搭建环境

页面准备

   	<body>
      	<table border="1" width="500">
      		<tr>
      			<td>用户名:</td>
      			<td><input type="text" name="name" id="name"  onblur="checkUserName()"><span id="span01"></span></td> 
      		</tr>
      		<tr>
      			<td>密码</td>
      			<td><input type="text" name=""></td>
      		</tr>
      		<tr>
      			<td>邮箱</td>
      			<td><input type="text" name=""></td>
      		</tr>
      		<tr>
      			<td>简介</td>
      			<td><input type="text" name=""></td>
      		</tr>
      		<tr>
      			<td colspan="2"><input type="submit" value="注册"></td>
      		</tr>
      	</table>
   </body>

数据库准备

2.2 Servlet 代码

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	try {	
		request.setCharacterEncoding("UTF-8");
		
		//1. 检测是否存在
		String name = request.getParameter("name");
		System.out.println("name="+name);
		UserDao dao = new UserDaomImpl();
		boolean isExist = dao.checkUserName(name);			
		
		//2.  通知页面，到底有还是没有。
		if(isExist){
			response.getWriter().println(1);  //存在用户名
		}else{
			response.getWriter().println(2); //不存在该用户名
		}			
	} catch (SQLException e) {
		e.printStackTrace();
	}
}

2.3 Dao 代码

public class UserDaomImpl implements UserDao{
	
	@Override
	public boolean checkUserName(String username) throws SQLException {
		QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
				
		String sql = "select count(*) from t_user where username =?";
		runner.query(sql, new  ScalarHandler(), username);

		Long result = (Long) runner.query(sql, new  ScalarHandler(), username); 
		return result > 0 ;
	}
		
}

2.4 jsp页面显示

function checkUserName() {

	//获取输入框的值 document 整个网页
	var name = document.getElementById("name").value; // value  value() val val()
	//1. 创建对象
	var request = ajaxFunction();
		
	//2. 发送请求
	request.open("POST"  ,"/day16/CheckUserNameServlet" , true );
		
	//注册状态改变监听，获取服务器传送过来的数据
	request.onreadystatechange = function(){
			
		if(request.readyState == 4 && request.status == 200){
			//alert(request.responseText);
			var data = request.responseText;
			if(data == 1){
				//alert("用户名已存在");
				document.getElementById("span01").innerHTML = "<font color='red'>用户名已存在!</font>";
			}else{
				document.getElementById("span01").innerHTML = "<font color='green'>用户名可用!</font>";
				//alert("用户名未存在");
			}
		}		
	}
		
	request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	request.send("name="+name);
}

3. JQuery概述

是什么?

javascript 的代码框架。

有什么用?

简化代码，提高效率。

核心

write less do more , 写得更少，做的更多。

3.1 JQuery 的 Ajax

Servlet

public class DemoServlet02 extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		String name = request.getParameter("name");
		int age = Integer.parseInt(request.getParameter("age"));
		System.out.println("收到了请求..."+name+"="+age);
		
		response.setContentType("text/html;charset=utf-8");
		response.getWriter().write("给你一份数据");
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

3.2 Load()

<script type="text/javascript">
	function load() {
	
		//找到这个元素， 去执行加载的动作， 加载/day16/DemoServlet02 ， 得到的数据，赋值显示
		$("#aaa").load("/day16/DemoServlet02" , function(responseText , statusTXT  , xhr) {
			//alert("jieguo:"+responseText);
			//找到id为text01的元素， 设置它的value属性值为 responseText 对应的值
			$("#aaa").val(responseText);
		}); 
	}
</script>
</head>
<body>

<!-- <h3><a href="" οnclick="load()">使用JQuery执行load方法</a></h3> 
	有两次刷新, 先走 onClick的方法，取到数据回来之后，赋值显示。 
	接着 走 href=""的路径，但是这个属性没有给值，所以会把当前的页面重新再刷新一次。
	所以导致看不见值。-->
<h3><input type="button"  onclick="load()" value="使用JQuery执行load方法"> </h3>

<input type="text" id="aaa">

3.3 Get方法

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<script type="text/javascript">
	//$.get(URL,callback);
	function get() {
		$.get("/day16/DemoServlet02"  , function(data ,status) {
			alert("结果是："+data);
			//$("#div01") 等价于 document.getElementById("div01");

			//$("#div01").val(); //val  用于设置 元素里面有values 的属性值 
			//$("#div01").text("A="+data);
			$("#div01").html(data); // <font>
		});
	}
</script>
<title>Insert title here</title>
</head>
<body>

	<input type="button" onclick="get()" value="使用JQuery演示 get方法">
	
	 <div id="div01"  style="width: 100px ; height: 100px ; border: 1px solid blue; ">
	 
	 </div>

</body>

赋值显示

val(); 只能放那些标签带有value属性
html(); 可以写写html代码
text();

其实
html()和text()
没有什么区别，如果想针对这分数据做html样式处理，那么只能用html()

3.4 Post方法

load

  	$("#元素id").load(url地址);
    	$("#div1").load(serlvet); 使用的get请求，回来赋值的时候， 使用text();去赋值

  	//语法格式 ： $.get(URL,callback);	
		使用案例： $.get("/day16/DemoServlet02"  , function(data ,status) {
			$("#div01").text(data);
		});

post

  	//语法格式：$.post(URL,data,callback);
		function post() {
			$.post("/day16/DemoServlet02", {name:"zhangsan",age:18},function(data,status) {
				//想要放数据到div里面去。 --- 找到div
				$("#div01").html(data);
			});
		}

3.5 ajax方法

4 $.ajax() 底层功能最强大的
- url
  :发送请求的地址
- data
  :发送到服务器的数据,请求参数
- type
  :请求方式 (“POST” 或 “GET”)，
- success
  :成功的回调函数，success(data, textStatus, jqXHR)
- error
  :请求失败时调用此函数
- dataType
  :预期服务器返回的数据类型
  - "xml"
    : 返回 XML 文档，可用 jQuery 处理。
  - "html"
    : 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
  - "script"
    : 返回纯文本 JavaScript 代码。不会自动缓存结果。
  - "json"
    : 返回 JSON 数据。
  - "jsonp"
    : JSONP 格式。
  - "text"
    : 返回纯文本字符串

$.ajax({
	"url":url,
	"data":params,
	"type":"POST",
	"success":function(data){
		alert(data);
	},
	"error":function(){
		alert("服务器繁忙，请稍后重试");
	},
	"dataType":"json"
	});

4. 使用JQuery去实现校验用户名

<!-- 导入JQuery的支持 -->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">

	function checkUserName() {
		//1. 获取输入框的内容
		var name = $("#name").val();
		
		//2. 发送请求
		$.post("/day16/CheckUserNameServlet" , {name:name} , function(data , status){
			//alert(data);
			if(data == 1){//用户名存在
				//alert("用户名存在");
				$("#span01").html("<font color='red'>用户名已被注册</font>");
			}else{
				//alert("用户名可用");
				$("#span01").html("<font color='green'>用户名可以使用</font>");
			}
		} );
		//3. 输出响应的数据到页面上。
	}
	
</script>
</head>
<body>
<body>
	<table border="1" width="500">
		<tr>
			<td>用户名:</td>
			<td><input type="text" name="name" id="name"  onblur="checkUserName()"><span id="span01"></span></td> 
		</tr>
		<tr>
			<td>密码</td>
			<td><input type="text" name=""></td>
		</tr>
		<tr>
			<td>邮箱</td>
			<td><input type="text" name=""></td>
		</tr>
		<tr>
			<td>简介</td>
			<td><input type="text" name=""></td>
		</tr>
		<tr>
			<td colspan="2"><input type="submit" value="注册"></td>
		</tr>
	</table>
</body>

5. 实现百度搜索提示

搭建环境

定义首页

   	<body>
      	<center>
      	<h2>黑马</h2>
      		<input type="text" name="word" id="word" style="width: 600px ; height: 50px  ;font-size: 20px;">
      		<input type="button" value="黑马一下"  style="height: 55px ; width: 100px ; ">
   
      		<div id="div01" style="position:relative; left : -54px; width: 600px; height: 200px ; border:  1px solid blue; display: none"></div>
      	</center>
      	</body>

定义数据库

捕获键盘弹起

$(function(){
	$("#word").keyup(function() {
		alert("键盘弹起了..");
	})
});

JS请求

	$(function(){
		$("#word").keyup(function() {
			//2。 获取输入框的值 
			//var word = $("#word").val();
			//this  对应就是执行这个方法的那个对象， $("#word")
			var word = $(this).val();
	
			if(word == ""){
				$("#div01").hide();
			}else{
				//3. 请求数据。
				$.post("find",{word:word} ,function(data , status){
					//alert(data);
					$("#div01").show();
					$("#div01").html(data);
				});
			}
			
		})
	});

Servlet 代码

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
	request.setCharacterEncoding("utf-8");
	try {
		//1. 先获取参数
		String word = request.getParameter("word");
		System.out.println("word="+word);
				
		//2. 让dao执行查询
		WordsDao dao = new WordsDaoImpl();
		List<WordBean> list = dao.findWords(word);
				
		for (WordBean wordBean : list) {
			System.out.println("==="+wordBean.toString());
		}
				
		request.setAttribute("list", list);
				
		//3. 返回数据
		response.setContentType("text/html;charset=utf-8");
		//response.getWriter().write("数据是：");
		request.getRequestDispatcher("list.jsp").forward(request, response);
	} catch (SQLException e) {
		e.printStackTrace();
	}
		
}

list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>

<table style="width: 100%">
	<c:forEach items="${list }" var="wordBean">
		<tr>
			<td>${wordBean.words}</td>
		</tr>
	</c:forEach>
</table>

6. 使用JQuery实现省市联动

6.1 服务器和客户端数据传输的方式

  	<list>
    	<city>
    		<id>1<id>
    		<pid>1</pid>
    		<cname>深圳</cname>
    	</city>
    	<city >
    		<id>2<id>
    		<pid>1</pid>
    		<cname>东莞</cname>
    	</city>
   </list>

json

阅读性更好、容量更小。

对象

在这里插入图片描述

对象数组

在这里插入图片描述

在这里插入图片描述

去除不要的字段

在这里插入图片描述

6.2 环境准备

1.准备数据库

2.准备页面

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/city_json.js"></script>

<!-- 引用的是 xml的处理方法 <script type="text/javascript" src="js/city.js"></script> -->
</head>
<body>
省份: <select name="province" id ="province">
		<option value="" >-请选择 -
		<option value="1" >广东
		<option value="2" >湖南
		<option value="3" >湖北
		<option value="4" >四川
	</select>
城市: 
	<select name="city" id="city">
		<option value="" >-请选择 -
	</select>
</body>
</html>

6.3 方式1： XStream的使用

public class CityServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
		try {
			//1. 获取参数
			int pid = Integer.parseInt(request.getParameter("pid"));
			
			//2 找出所有的城市
			CityDao dao = new CityDaoImpl();
			List<CityBean> list = dao.findCity(pid);
			
			//3. 返回数据。手动拼  ---> XStream  转化 bean对象成 xml
			XStream xStream = new XStream();
			
			//想把id做成属性
			//xStream.useAttributeFor(CityBean.class, "id");
			//设置别名
			xStream.alias("city", CityBean.class);
			//转化一个对象成xml字符串
			String xml = xStream.toXML(list);
			
			//返回数据
			response.setContentType("text/xml;charset=utf-8");
			response.getWriter().write(xml);
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		};
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

JS代码

$(function() {
	//1。找到省份的元素
	$("#province").change(function() {
		//2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
		//$("#province").varl();
		var pid = $(this).val();
		
		/*<list>
			<city>
				<id>1<id>
				<pid>1</pid>
				<cname>深圳</cname>
			</city>
			<city >
				<id>2<id>
				<pid>1</pid>
				<cname>东莞</cname>
			</city>
		</list>*/
		
		$.post( "CityServlet",{pid:pid} ,function(data,status){
			//alert("回来数据了:"+data);
			
			//先清空以前的值：
			$("#city").html("<option value='' >-请选择-")
			//遍历： 
			//从data数据里面找出所有的city  ， 然后遍历所有的city。
			//遍历一个city，就执行一次function方法
			$(data).find("city").each(function() {
				
				//遍历出来的每一个city，取它的孩子。 id , cname
				var id = $(this).children("id").text();
				var cname = $(this).children("cname").text();
				
				$("#city").append("<option value='"+id+"' >"+cname)
			});
		} );
		
	});
});

6.4 方式2 使用json显示省市联动效果

在这里插入图片描述

serlvet代码：

public class CityServlet02 extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
		try {
			//1. 获取参数
			int pid = Integer.parseInt(request.getParameter("pid"));
			
			//2 找出所有的城市
			CityDao dao = new CityDaoImpl();
			List<CityBean> list = dao.findCity(pid);
			
			//3. 把list ---> json数据
			//JSONArray ---> 变成数组 ， 集合  []
			//JSONObject ---> 变成简单的数据  { name : zhangsan , age:18}
			
			JSONArray jsonArray = JSONArray.fromObject(list);
			String json = jsonArray.toString();
			
			
			response.setContentType("text/html;charset=utf-8");
			response.getWriter().write(json);
			
			
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		};
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

js代码

$(function() {
	//1。找到省份的元素
	$("#province").change(function() {
		//2. 一旦里面的值发生了改变，那么就去请求该省份的城市数据
		//$("#province").varl();
		var pid = $(this).val();
		
		/*[
		    {
		        "cname": "深圳",
		        "id": 1,
		        "pid": 1
		    },
		    {
		        "cname": "东莞",
		        "id": 2,
		        "pid": 1
		    }
		    ...
		]*/
		$.post( "CityServlet02",{pid:pid} ,function(data,status){
			
			//先清空
			$("#city").html("<option value='' >-请选择-");
			//再遍历，追加
			$(data).each(function(index , c) {
				$("#city").append("<option value='"+c.id+"' >"+c.cname)
			});
		},"json" );
		
	});
});

方法2

//action
/* 市显示 */
	public String ShiShow() throws IOException {
		System.out.println("选择好了省，加载市");
		System.out.println(shengstring);
		List<Shi> shilist = null;
		shilist = shiDao.SelectByShengId(shengstring);
		//根据参数将想要的数据拿到，示例现在拿到了一个list对象
		Map<Integer, String> map =new HashMap<Integer, String>();				
		List<Map<Integer, String>> listmaps = new ArrayList<Map<Integer, String>>();
		for (Shi shi : shilist) {
			System.out.println("市的名字："+shi.getSName());
			map.put(shi.getSKey(), shi.getSName());
		}
		listmaps.add(map);
		Gson gson = new Gson();
		String json = gson.toJson(listmaps);
		ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
		ServletActionContext.getResponse().getWriter().write(json);
		System.out.println(json);
		return null;
	}

	/* 区显示 */
	public String RegionShow() throws IOException {
		System.out.println("选择好了市，加载区");
		List<Region> rlist = null;
		rlist = regionDao.SelectregionByshengidshiid(shistring);
		//根据参数将想要的数据拿到，示例现在拿到了一个list对象
		Map<Integer, String> map =new HashMap<Integer, String>();				
		List<Map<Integer, String>> listmaps = new ArrayList<Map<Integer, String>>();
		for (Region region : rlist) {
			System.out.println("县区的名字"+region.getRName());
			map.put(region.getRKey(), region.getRName());
		}
		listmaps.add(map);
		Gson gson = new Gson();
		String json = gson.toJson(listmaps);
		ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
		ServletActionContext.getResponse().getWriter().write(json);
		System.out.println(json);
		return null;
	}

function shengSelect() { /*选省显示市*/

			var shengstring = $("#shengstring").val();
			/*  alert(shengstring); */
			$("#shi").empty();
			$("#regionstring").empty();
			$("#xiangzhen").empty();
			$("#cun").empty();
			var params = $.param({
				'shengstring' : shengstring
			}, true);
			$.ajax({
				url : "HT_UserAddlink_Action_ShiShow",
				async : true,
				type : "POST",
				data : params,
				success : function(datas) {
					/* alert(datas); */
					datas = JSON.parse(datas)
					$("#shi").empty();
					$("#shi").append(
							"<option>-----------请选择-----------</option>");
					$("#regionstring").append(
							"<option>-----------请选择-----------</option>");
					$("#xiangzhen").append(
							"<option>-----------请选择-----------</option>");
					$("#cun").append(
							"<option>-----------请选择-----------</option>");
					for (x in datas[0]) {
						$("#shi").append(
								"<option value="+x+">" + datas[0][x]
										+ "</option>");
					}

				}
			});
		}
		function shiSelect() {
			//选市显示区
			var shengstring = $("#shengstring").val();
			var shi1 = $("#shi").val();
			/* alert(shi1); */
			$("#regionstring").empty();
			$("#xiangzhen").empty();
			$("#cun").empty();
			var params1 = $.param({
				'shistring' : shi1
			}, true);
			$.ajax({
				url : "HT_UserAddlink_Action_RegionShow",
				async : true,
				type : "POST",
				data : params1,
				success : function(datas1) {
					/* alert(datas1); */
					datas1 = JSON.parse(datas1)
					$("#regionstring").append(
							"<option>-----------请选择-----------</option>");
					$("#xiangzhen").append(
							"<option>-----------请选择-----------</option>");
					$("#cun").append(
							"<option>-----------请选择-----------</option>");
					for (x in datas1[0]) {
						$("#regionstring").append(
								"<option value="+x+">" + datas1[0][x]
										+ "</option>");
					}
				}
			});
		}

原文链接：https://blog.csdn.net/qq_40926887/article/details/126917055

这里写目录标题

Ajax & Jquery

1. Ajax概念

1.1 常用方法

1.1.1 方法

1.1.2 属性

1.1.3 事件处理器

1.2 数据请求

1.2.1 Get

1.2.2 Post

1.2.3 数据获取

2. Ajax案例 【校验用户名是否可用】

2.1 搭建环境

2.2 Servlet 代码

2.3 Dao 代码

2.4 jsp页面显示

3. JQuery概述

3.1 JQuery 的 Ajax

Servlet

3.2 Load()

3.3 Get方法

赋值显示

3.4 Post方法

3.5 ajax方法

4. 使用JQuery去实现校验用户名

5. 实现百度搜索提示

搭建环境

捕获键盘弹起

JS请求

Servlet 代码

list.jsp

6. 使用JQuery实现 省市联动

6.1 服务器和客户端数据传输的方式

6.2 环境准备

6.3 方式1： XStream的使用

6.4 方式2 使用json显示省市联动效果

你可能也喜欢

2. Ajax案例【校验用户名是否可用】

6. 使用JQuery实现省市联动