Jquery的AJAX应用详解
案例一：取得服务端当前时间
简单形式：jQuery对象.load(url)，返回结果自动添加到jQuery对象代表的标签中间
<body>
当前时间：
<span id="time"></span><br />
<input type="button" value="获取时间" />
<script type="text/javascript">
$(":button").click(function() {
var url = "${pageContext.request.contextPath}/servlet/TimeServlet?time="+ new Date().getTime();
$("#time").load(url);
});
</script>
</body>
public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String str = sdf.format(new Date());
response.setContentType("text/html;charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.write(str);
pw.flush();
pw.close();
}
复杂形式：jQuery对象.load(url,sendData,function(backData,textStatus,ajax){... ...})
<body>
当前时间：
<span id="time"></span><br />
<input type="button" value="获取时间" />
<script type="text/javascript">
$(":button").click(function() {
//参数一:发送的路径
var url = "${pageContext.request.contextPath}/servlet/TimeServlet?time="+ new Date().getTime();
//参数二:sendData发送请求体中的数据,以JSON文本书写的发送的参数
var sendDate = {
"name" : "哈哈",
"sal" : 6000
};
//参数三:回调函数,类似于传统方式ajax.onreadystatechange = 处理函数
$("#time").load(url,sendDate,function(backData,textStatus,xmlHttpRequest){
//回调函数中参数一：backData表示返回的数据，它是js对象
//回调函数中参数二：textStatus表示返回状态的文本描述，例如：success，error，
//回调函数中参数三：xmlHttpRequest表示ajax中的核心对象
alert("backData=" + backData);//输出：backData=2017-01-15 20:26:50
alert("textStatus=" + textStatus);//输出：textStatus=success
alert("xmlHttpRequest=" + xmlHttpRequest.readyState);//输出：xmlHttpRequest=4
alert("xmlHttpRequest=" + xmlHttpRequest.status);//输出：xmlHttpRequest=200
alert("xmlHttpRequest=" + xmlHttpRequest.responseText);//它是一个字符串，输出：xmlHttpRequest=2017-01-15 20:26:50
//项目中只需要使用backDate即可
});
});
</script>
</body>
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
System.out.println("POST");
String name = request.getParameter("name");
String sal = request.getParameter("sal");
System.out.println(name+":"+sal);
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String str = sdf.format(new Date());
response.setContentType("text/html;charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.write(str);
pw.flush();
pw.close();
}
注意：对于load方法而言，如果请求体无参数发送的话，load方法采用GET方式提交，如果请求体有参数发送的话，load方法采用POST方式提交，使用load方法时，自动进行编码，无需手工编码
案例二：检查注册用户名和密码是否存在
<body>
<!-- 在异步提交的方式下，form标签的action和method属性没有意义-->
<form action="01_time.jsp" 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>
<span></span>
<script type="text/javascript">
$(":button").click(function() {
var username = $(":text").val();//哈哈
var password = $(":password").val();//123
var url = "${pageContext.request.contextPath}/servlet/UserServlet?time="+ new Date().getTime();
//手工写JSON文本
/* var sendData = {
"username" : username,
"password" : password
}; */
var sendData = $("form").serialize();//这行相当于上面三行
$.post(url,sendData,function(backDate) {
//backDate：
//如果服务器返回html，即backDate就是string，不要解析
//如果服务器返回json，即backDate就是object，要解析
//如果服务器返回xml，即backDate就是object，要解析
var $img = $("<img src='"+backDate+"' width='14px' height='14px'>");
$("span").text("");
$("span").append($img);
});
});
</script>
</body>
public class UserServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");//哈哈
String password = request.getParameter("password");//
String tip = "images/MsgSent.gif";
if("哈哈".equals(username) && "123".equals(password)){
tip = "images/MsgError.gif";
}
response.setContentType("text/html;charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.write(tip);
pw.flush();
pw.close();
}
}
$.get(url,sendData,function(backData,textStatus,ajax){... ...})
$.post(url,sendData,function(backData,textStatus,ajax){... ...})（提倡）
注意：使用get或post方法时，自动进行编码，无需手工编码
jQuery对象.serialize() ：自动生成JSON格式的文本，要为每个jQuery对象设置一个name属性，因为name属性会被认为请求参数名，必须用<form>标签元素，如果属性过多，强烈推荐采用这个API
案例三：jQuery解析XML
<?xml version="1.0" encoding="UTF-8"?>
<root>
<city>广州</city>
<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}/03_city.xml?time="+ new Date().getTime();
var sendData = null;
$.get(url, sendData, function(xml) {
//用jquery中的api解析xml文件，这时的xml是js对象
var $xml = $(xml).find("city");
//迭代
$xml.each(function() {
var city = $(this).text();
alert(city);
});
});
});
</script>
</body>
案例四：基于jQuery的AJAX二级联动
<body>
<select id="province">
<option>选择省份</option>
<option>江苏</option>
<option>浙江</option>
</select>
<select id="city">
<option>选择城市</option>
</select>
<!-- 省份->城市 -->
<script type="text/javascript">
//定位省份下拉框，同时添时内容改变事件
$("#province").change(
function() {
//清空原城市下拉框中的内容，除第一项外
$("#city option:gt(0)").remove();
//获取选中的省份
var province = $("#province option:selected").text();
//如果选中的不是"选择省份"
if ("选择省份" != province) {
$.ajax({
type : "POST",
url : "${pageContext.request.contextPath}/findCityByProvinceRequest?time="+ new Date().getTime(),
data : {
"province" : province
},
success : function(backDate,textStatus, ajax) {
//解析json文本
var array = backDate.setCity;
var size = array.length;
for (var i = 0; i < size; i++) {
var city = array[i];
var $option = $("<option>"+ city+ "</option>");
$("#city").append($option);
}
}
});
}
});
</script>
</body>
public class ProvinceCityAction extends ActionSupport{
private String province;
public void setProvince(String province) {
this.province = province;
}
public String findCityByProvince() throws Exception {
setCity = new LinkedHashSet<String>();
if("江苏".equals(province)){
setCity.add("南京");
setCity.add("扬州");
}else if("浙江".equals(province)){
setCity.add("杭州");
setCity.add("宁波");
setCity.add("温州");
}
return SUCCESS;
}
private Set<String> setCity;
public Set<String> getSetCity() {
return setCity;
}
}
Jquery的AJAX应用详解的更多相关文章
- 触碰jQuery：AJAX异步详解
触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
- jQuery调用AJAX异步详解[转]
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- 触碰jQuery：AJAX异步详解（转）
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- jQuery中 $.ajax()方法详解
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...
- Jquery使用ajax参数详解
记录一下 Jquery使用ajax(post.get及参数详解) 1.get: $.ajax({ type: "GET", url: baseUrl + "Showco ...
- jquery datatable ajax配置详解
我写的这个东西类似于个人笔记,如果你想要完整的而了解 可以去这里看看 http://dt.thxopen.com/ 包括英文原网站都不错. 通过配置ajax的属性和服务器交互 $("sele ...
- jQuery之$.ajax()方法详解及实例
1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...
- Jquery中 $.Ajax() 参数详解
1.url:要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type:要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如pu ...
- jquery中的ajax方法详解
定义和用法ajax() 方法通过 HTTP 请求加载远程数据.该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XML ...
随机推荐
- CodeForces 678B The Same Calendar
暴力.一年一年判断过去.如果某一年与输入的年份闰年性质相同,并且1月1日是星期几相同,那么输出. #include<cstdio> #include<cstring> #inc ...
- Qt5：图片彩色键控，设置图片中指定颜色的像素为透明
有图片 1.png 设置该图中的颜色为粉红色的像素为透明 QPixmap pix("1.png"); QBitmap mask= pix.createMaskFromColor(Q ...
- 解读QML之四
解读QML之四 QML对象属性 每一个QML对象类型都定义了一系列属性.每创建一个该对象类型的实例,该实例的这些属性也自动被创建了.接下来我们讨论几种不同类型的属性. id属性 每一个QML对象类型都 ...
- Dice Possibility
Dice Possibility 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 What is possibility of rolling N dice and th ...
- HDU 1213 How Many Tables 并查集 寻找不同集合的个数
题目大意:有n个人 m行数据,每行数据给出两个数A B,代表A-B认识,如果A-B B-C认识则A-C认识,认识的人可以做一个桌子,问最少需要多少个桌子. 题目思路:利用并查集对相互认识的人进行集合的 ...
- Java中的回调函数学习
Java中的回调函数学习 博客分类: J2SE JavaJ# 一般来说分为以下几步: 声明回调函数的统一接口interface A,包含方法callback(); 在调用类caller内将该接口设置 ...
- RS485通讯协议的应用 (转)
源:http://blog.chinaunix.net/uid-26921272-id-3506640.html RS485缺点: RS485总线是一种常规的通信总线,它不能够做总线的自动仲裁,也就是 ...
- strace 分析 跟踪 进程错误
strace是什么? 按照strace官网的描述, strace是一个可用于诊断.调试和教学的Linux用户空间跟踪器.我们用它来监控用户空间进程和内核的交互,比如系统调用.信号传递.进程状态变更等. ...
- 微信小程序开发入门教程
做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先 ...
- RHEL7 单独安装图形 X11
RHEL7 默认是最小化安装(Minimal Install),没有图形界面, 我们应该选择Server with GUI.若已错过此步骤,我们采用以下方式补充安装GUI界面.