AJAX（Jquery)

一）jQuery常用AJAX-API

目的：简化客户端与服务端进行局部刷新的异步通讯

（1）取得服务端当前时间

　　简单形式：jQuery对象.load(url)

　返回结果自动添加到jQuery对象代表的标签中间如果是Servlet的话，采用的是GET方式，如下

前台：

<body>
	当前时间：<span id="time"></span><br/>
	<input type="button" value="获取时间"/>
	<script type="text/javascript">
    	$(":button").click(function(){
    		var url="${pageContext.request.contextPath}/TServlet?time="+new Date().getTime();
    		$("#time").load(url);
    	});
    </script>
</body>

后台

public class TServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("GET方式");
		SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		String str=sdf.format(new Date());
		response.setContentType("text/html;charst=utf-8");
		PrintWriter pw=response.getWriter();
		pw.write(str);
		pw.flush();
		pw.close();
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("Post方式");
	}

}

效果如下：

复杂形式：jQuery对象.load(url,sendData,function(backData,textStatus,ajax){... ...})

sendData = {"user.name":"jack","user.pass":"123"};

以JSON格式文本方式发送，使用POST方式发送，服务端能收到数据

前台这个时候如下

$(":button").click(function(){
    		var url="${pageContext.request.contextPath}/TServlet?time="+new Date().getTime();
    		//参数二以json的方式发送
    		var sendDate={
    			"name" : "郭庆兴",
    			"age"  : 21
    		};
    		$("#time").load(url,sendDate);
    	});

后台servlet：

public class TServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("GET方式");
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("Post方式");
		String name=request.getParameter("name");
		int age=Integer.parseInt(request.getParameter("age"));
		System.out.println(name+":"+age);
		SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		String str=sdf.format(new Date());
		response.setContentType("text/html;charst=utf-8");
		response.setCharacterEncoding("UTF-8");
		PrintWriter pw=response.getWriter();
		pw.write(str+"  测试："+name+":"+age);
		pw.flush();
		pw.close();
	}
}

效果如下

总结

（1）、对于load方法而言，如果请求体无参数发送的话，load方法采用GET方式提交；如果请求体有参数发送的话，load方法采用POST方式提交

（2）、使用load方法时，自动进行编码，服务器端接收无需手工编码。

前台也可以这样写

<script type="text/javascript">
    	$(":button").click(function(){
    		var url="${pageContext.request.contextPath}/TServlet?time="+new Date().getTime();
    		//参数二以json的方式发送
    		var sendDate={
    			"name" : "郭庆兴",
    			"age"  : 21
    		};
    		$("#time").load(url,sendDate,function(backData,textStatus,xmlHttpRequest){
    			//回调函数中参数一：backData表示返回的数据，它是js对象
				//回调函数中参数二：textStatus表示返回状态的文本描述，例如：success，error，
				//回调函数中参数三：xmlHttpRequest表示ajax中的核心对象
    			alert(backData);
    		});
    	});</script>

（2）、jquery的get和post方法

$.get(url,sendData,function(backData,textStatus,ajax){... ...})

$.post(url,sendData,function(backData,textStatus,ajax){... ...})

如检查注册用户名和密码是否存在

前台：

<body>
	<!--
		在异步提交的方式下，form标签的action和method属性没有意义
	-->
	<form action="" method="GET">
		<table border="2" align="center">
			<tr>
				<th>用户名</th>
				<td><input type="text" name="username"/></td>
			</tr>
			<tr>
				<th>密码</th>
				<td><input type="password" name="password"/></td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input type="button" value="检查" style="width:111px"/>
				</td>
			</tr>
		</table>
	</form>
	<center><span></span></center>
	<script type="text/javascript">
    	$(":button").click(function(){
    		var userName=$(":text").val();
    		var password=$(":password").val();
    		var url="${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime();
    		//参数二以json的方式发送
    		var sendDate={
    			"userName" : userName,
    			"password" : password
    		};
    		$.post(url,sendDate,function(backDate){
    			//转为jquery对象
    			var $img=$("<img src='img/"+backDate+"' width='14px' height='14px' />")
    			//插如图片，先清空
    			$("span").html("");
    			$("span").append($img);
    		})
    	});
    </script>
</body>

后台

public class UserServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String userName = request.getParameter("userName");
		String password = request.getParameter("password");
		System.out.println(userName);
		String tip = "error.gif";
		if("张三".equals(userName) && "111".equals(password)){
			tip = "right.gif";
		}
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter pw = response.getWriter();
		pw.write(tip);
		pw.flush();
		pw.close();
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		this.doGet(request, response);
	}
}

但注意，我们可以简化对数据的封装，毕竟每一次从表单中取数据再一一对应成json格式过于麻烦，jquery提供了jQuery对象.serialize()。

作用：自动生成JSON格式的文本

注意：为每个jQuery对象设置一个name属性，因为name属性会被认为请求参数名，如前台和后台：

<td><input type="text" name="userName"/></td>

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

注意：必须用<form>标签元素

适用：如果属性过多，强烈推荐采用这个API

前台可以这样写了

<script type="text/javascript">
    	$(":button").click(function(){
    		var userName=$(":text").val();
    		var password=$(":password").val();
    		var url="${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime();
    		//参数二以json的方式发送
    		/* var sendDate={
    			"userName" : userName,
    			"password" : password
    		}; */
    		var sendDate=$("form").serialize();
    		$.post(url,sendDate,function(backDate){
    			//转为jquery对象
    			var $img=$("<img src='img/"+backDate+"' width='14px' height='14px' />")
    			//插如图片，先清空
    			$("span").html("");
    			$("span").append($img);
    		})
    	});
</script>

效果如下

（3）、jQuery解析XML

在webroot下建立一个city.xml文档

<?xml version="1.0" encoding="UTF-8"?>
<root>
	<city>黄石</city>
	<city>武汉</city>
	<city>深圳</city>
	<city>荆州</city>
	<city>上海</city>
</root>

接着就可以写前台的信息了

<body>
	<input type="button" value="解析服务器的xml文件"/>
	<script type="text/javascript">
    	$(":button").click(function(){
    		var url="${pageContext.request.contextPath}/city.xml?time="+new Date().getTime();
    		var sendDate=null;
    		$.get(url,sendDate,function(backDataXml){
    			//用jquery中的api解析xml文件，这时的xmnl是js对象
    			var $xml=$(backDataXml).find("city");
    			//迭代
    			$xml.each(function(){
    				var city=$(this).text();
    				console.log(city);
    			});
    		});
    	});
    </script>
</body>

效果如下

（4）、省份-城市，基于jQuery的AJAX二级联动，用Struts2整合AJAX

引入struts的必须jar包，同时还需要引入struts2-json-plugin-2.3.4.1.jar包，在web.xml中配置struts2的拦截器

<!-- 引入struts核心过滤器 -->
  <filter>
  	<filter-name>struts2</filter-name>
  	<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
  </filter>
  <filter-mapping>
  	<filter-name>struts2</filter-name>
  	<url-pattern>/struts2/*</url-pattern>
  </filter-mapping>

前台代码如下：

<body>
   省份：<select id="provinceID" style="width: 120px">
   		<option>选择省份</option>
   		<option>湖北省</option>
   		<option>广东省</option>
   		<option>湖南省</option>
   </select>
     
   城市：<select id="cityID" style="width: 120px">
   		<option>选择城市</option>
   </select>
    <script type="text/javascript">
    	$('#provinceID').change(function(){
    		//清空还原测试下拉框的内容，排除第一项、:gt(n)匹配所有大于n值的元素  remove()从DOM中删除所有匹配的元素。
    		$("#cityID option:gt(0)").remove();
    		//获取选中的省份
    		var province=$("#provinceID option:selected").text();
    		//如果选中的不是“选择省份”，就要处理
    		if ("选择省份" != province) {
				$.ajax({
				type       :  "POST",
				url		   :  "${pageContext.request.contextPath}/struts2/findCity?time="+new Date().getTime(),
				data	   :  { "province" : province },
				success    :  function(backDate,textStatus,ajax){
									//解析json文本
									var array=backDate.setCity;
									for (var i = 0; i < array.length; i++) {
										var city=array[i];
										var $option=$("<option>"+city+"</option>");
										//alert(city);
										$("#cityID").append($option);
									}
								}
				});
			}
    	});
    </script>
</body>

后台：1、Action

public class ProvinceAction extends ActionSupport {
	private String province;
	public void setProvince(String province) {
		this.province = province;
	}
	/**
	 * 加入struts2-json-plugin-2.3.4.1.jar包后，程序会去遍历本action的get方法，同时将其封装为json
	 */
	private Set<String> setCity;
	public Set<String> getSetCity() {
		return setCity;
	}
	//根据省份查城市
	public String findCity() throws Exception {
		setCity=new LinkedHashSet<String>();
		System.out.println(province);
		if ("湖北省".equals(province)) {
			setCity.add("武汉");
			setCity.add("黄石");
			setCity.add("荆州");
			setCity.add("襄阳");
			setCity.add("宜昌");
		}else if ("湖南省".equals(province)) {
			setCity.add("长沙");
			setCity.add("株洲");
			setCity.add("萍乡");
			setCity.add("湘潭");
			setCity.add("岳阳");
		}else if ("广东省".equals(province)) {
			setCity.add("广州");
			setCity.add("深圳");
			setCity.add("中山");
			setCity.add("佛山");
			setCity.add("汕头");
			setCity.add("珠海");
		}
		return SUCCESS;
	}
}

2、struts.xml

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE struts PUBLIC
	"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
	"http://struts.apache.org/dtds/struts-2.3.dtd">

<struts>
	<!-- extends="json-default" 继承自struts2-json-plugin-2.3.4.1.jar/struts-plugin.xml文件中的
		<package name="json-default" extends="struts-default"> -->
	<package name="province" extends="json-default" namespace="/"
		abstract="false">

		<action name="findCity" class="com.gqx.test1.ProvinceAction"
			method="findCity">
			<result name="success" type="json"></result>
		</action>
	</package>
</struts>

效果如下：

AJAX（Jquery)的更多相关文章

如何使用ajax（jquery）
以下是我第一次工作时写的ajax: $.ajax({ url: "/spinweb/store/storeHome.do", dataType: 'json', data: { & ...
JQuery中的Ajax（六）
一:Ajax请求jQuery.ajax(options) load(url,[data],[callback])jQuery.get(url,[data],[callback]) jQuery.get ...
jQuery学习笔记之jQuery的Ajax（3）
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步（open的post方式send函数带参数）（post请求和get请求区别：get：快、简单 post：安全，量大，不缓存）（服务器同步和异步区别：同步：等待服务器响应当中浏览器不能做别的事情）（ajax和jquery一起用的）
js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)( ...
Sping MVC不使用任何注解处理（jQuery）Ajax请求（基于XML配置）
1. Spring Spring框架是一个轻量级的解决方案,是一个潜在的一站式商店,用于构建企业就绪的应用程序.Spring框架是一个Java平台,为开发Java应用程序提供全面的基础架构支持.Spr ...
Struts2处理（jQuery）Ajax请求
1. Ajax Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)时一种创建交互式网页应用的网页开发技术,它并不是一项新的技术,其产生 ...
Servlet处理（jQuery）Ajax请求
1. jQuery jQuery是一个JavaScript函数库,极大的简化了JavaScript编程,很容易学习.jQuery是目前最流行的开源js框架,并且提供了大量的扩展. 2. Aja ...
Ajax的使用（jquery的下载）
Ajax学习笔记(jquery的下载) JQuery的官网下载地址:http://jquery.com 右上角的"Download JQuery" 三个可供下载的文件: Prod ...
框架----Django之Ajax全套实例（原生AJAX，jQuery Ajax，“伪”AJAX，JSONP，CORS）
一.原生AJAX,jQuery Ajax,“伪”AJAX,JSONP 1. 浏览器访问 http://127.0.0.1:8000/index/ http://127.0.0.1:8000/fake_ ...

随机推荐

UNIX之父肯和丹尼斯（连载二）
从那一场“黑客招聘会”说起 2012年7月末在拉斯维加斯召开的全球黑客大会,已经是这系列会议的第二十一次.除了惯常的Bug发表.技术展示之外,最近几年的黑客大会也开始变得越来越像招聘会.IT业 ...
从点到面，给Button的属性动画
属性动画是API 11加进来的一个新特性,其实在现在来说也没什么新的了.属性动画可以对任意view的属性做动画,实现动画的原理就是在给定的时间内把属性从一个值变为另一个值.因此可以说属性动画什么都可以 ...
20171126-handler消息机制理解
1.handler消息机制的理解 http://www.jianshu.com/p/8343a39b8a2c?s_q_s_h_a_r_e_1MTAzNTIwODAxNTExNTg5NTkwMzE0Nz ...
hdu 2642 Stars 【二维树状数组】
题目题目大意:Yifenfei是一个浪漫的人,他喜欢数天上的星星.为了使问题变得更容易,我们假设天空是一个二维平面,上面的星星有时会亮,有时会发暗.最开始,没有明亮的星星在天空中,然后将给出一些信息 ...
hdu 4542 打表+含k个约数最小数
http://acm.hdu.edu.cn/showproblem.php?pid=4542 给出一个数K和两个操作如果操作是0,就求出一个最小的正整数X,满足X的约数个数为K. 如果操作是1,就求 ...
HDU2955 01背包
http://acm.hdu.edu.cn/showproblem.php?pid=2955 题目大意:给你一个劫匪抢银行的最高安全概率,给你银行得到钱数,和劫匪在这个银行可以逃跑的概率,问你最多能抢 ...
Android Studio-引用jar及so文件
一.引用jar文件 1.将jar文件复制.粘贴到app的libs目录中: 2.右键点击jar文件,并点击弹出菜单中的“Add As Library”,将jar文件作为类库添加到项目中: ...
To datafix AR DATE
http://www.cnblogs.com/benio/archive/2012/07/07/2580203.html AR transactions should be created on 6- ...
用 select 语句实现递归的方法
with Test_Recursion(Id,ParentId)AS(select Id,ParentId from [V_KPI_DetailsActivities] where ParentId ...
记录一次BUG修复-Entity Framwork SaveChanges()失效
目录一. 前言二.问题背景三.问题描述四.问题解决步骤六.总结一. 前言这是笔者在参与一个小型项目开发时所遇到的一个BUG,因为项目经验不足对Entity Framwork框架认识不足导 ...

AJAX（Jquery)

总结

（2）、jquery的get和post方法

（3）、jQuery解析XML

（4）、省份-城市，基于jQuery的AJAX二级联动，用Struts2整合AJAX

AJAX（Jquery)的更多相关文章

随机推荐

热门专题