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_ ...
随机推荐
- 我看Windows 8.1
在大家惊叹于Windows 8的大胆创新之时,Windows 8.1却已然来到.在公布了Preview之后,笔者便迫不及待地进行了安装,并在这里简单的说说最直观的感受. 提到Windows 8,不得不 ...
- spark的shuffle机制
对于大数据计算框架而言,Shuffle阶段的设计优劣是决定性能好坏的关键因素之一.本文将介绍目前Spark的shuffle实现,并将之与MapReduce进行简单对比.本文的介绍顺序是:shuffle ...
- hdu 4891 模拟水题
http://acm.hdu.edu.cn/showproblem.php?pid=4891 给出一个文本,问说有多少种理解方式. 1. $$中间的,(s1+1) * (s2+1) * ...*(sn ...
- 响应式 和 移动 web
移动web 教程:http://www.imooc.com/learn/494 iphone5 问题一:6401136的图片,能否在iphone5上完全显示? chrome下 iphone5:3205 ...
- ASP.NET Web API 框架研究 核心的消息处理管道
ASP.NET Web API 的核心框架是一个由一组HttpMessageHandler有序组成的双工消息处理管道:寄宿监听到请求接受后,把消息传入该管道经过所有HttpMessageHandler ...
- [C# 面试总结]9个点如何画10条线
问题描述 9个点画10条直线,要求每条直线上至少3个点,相信这道理题目很多朋友在面试的时候都遇到过的(同时自己在面试的时候也遇到过),所以这里记录下来以备复习. 解决方法1:
- 数据库常见索引解析（B树，B-树，B+树，B*树，位图索引，Hash索引）
B树 即二叉搜索树: 1.所有非叶子结点至多拥有两个儿子(Left和Right): 2.所有结点存储一个关键字: 3.非叶子结点的左指针指向小于其关键字的子树,右指针指向大于其关键字的子树: 如: B ...
- ASP.NET微信公众号用于给指定OpenId用户发送红包
ASP.NET微信公众号用于给指定OpenId用户发送红包 微信公众号要实现对指定用户发送红包,必须指定一个存放兵发放金额的商户号,在微信商户平台里面申请商户号并获取相关参数例如发送红包所要用到的安全 ...
- 【转】C# 之泛型详解
原文地址:https://www.cnblogs.com/yueyue184/p/5032156.html 什么是泛型 我们在编写程序时,经常遇到两个模块的功能非常相似,只是一个是处理int数据,另一 ...
- 百度小程序button去掉默认边框
百度小程序button去掉默认边框: button::after{ border:none; }