案例一:取得服务端当前时间

  简单形式: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应用详解的更多相关文章

  1. 触碰jQuery:AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  2. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  3. 触碰jQuery:AJAX异步详解(转)

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  4. jQuery中 $.ajax()方法详解

    $.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...

  5. Jquery使用ajax参数详解

    记录一下  Jquery使用ajax(post.get及参数详解) 1.get: $.ajax({ type: "GET", url: baseUrl + "Showco ...

  6. jquery datatable ajax配置详解

    我写的这个东西类似于个人笔记,如果你想要完整的而了解 可以去这里看看 http://dt.thxopen.com/ 包括英文原网站都不错. 通过配置ajax的属性和服务器交互 $("sele ...

  7. jQuery之$.ajax()方法详解及实例

    1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

  8. Jquery中 $.Ajax() 参数详解

    1.url:要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type:要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如pu ...

  9. jquery中的ajax方法详解

    定义和用法ajax() 方法通过 HTTP 请求加载远程数据.该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XML ...

随机推荐

  1. docker基本操作

    centos 7 安装docker 目前,CentOS 仅发行版本中的内核支持 Docker. Docker 运行在 CentOS 7 上,要求系统为64位.系统内核版本为 3.10 以上. Dock ...

  2. CMY/CMYK 打印机色彩

    CMY 发光物体和反光物体产生颜色的机制不同. 前者指光源光, 它的颜色由发光波长决定. 后者指不能发光但却能表现出颜色的物体, 例如色素. 色素的颜色由它不能吸收的光的波长决定. 比如红色色素, 除 ...

  3. C语言-09-文件操作

    文件类型 文本文件(ASCII) 简单的文本文件,可用任何文字处理程序阅读 二进制文件 包含 在ASCII及扩展ASCII字符中编写的数据或程序指令 的文件,通常图形文件及文字处理程序等计算机程序都属 ...

  4. 等价于n*n的矩阵,填写0,1,要求每行每列的都有偶数个1 (没有1也是偶数个),问有多少种方法。

    #define N 4 /* * 公式: * f(n) = 2^((n - 1) ^2) */ int calWays(int n) { int mutiNum = (n - 1) * (n - 1) ...

  5. DateTime类使用二:常用时间段操作(经典)

    //大家在做报表或查询的时候都会有给用户预设一些可选的日期范围(如上图)                //如本年度销售额.本季度利润.本月新增客户                //C#里内置的Da ...

  6. Alpha 冲刺 (4/10)

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:冲刺4 团队部分 后敬甲 过去两天完成了哪些任务 文字描述 主页部分图标的替换 -拍照按钮的设计和测试 GitHub代码 ...

  7. Confluence 6 垃圾收集性能问题

    这个文章与 Oracle 的 Hotspot JVM 虚拟机的内存管理为参照的.这些建议是我们在对大的 Confluence 安装实例用户进行咨询服务的时候得到的最佳配置方案. 请不要在 Conflu ...

  8. Android热门网络框架Volley详解[申明:来源于网络]

    Android热门网络框架Volley详解[申明:来源于网络] 地址:http://www.cnblogs.com/caobotao/p/5071658.html

  9. 你创建的OpenStack高性能虚拟机能实现“零损耗”么?

    使用默认参数创建的虚拟机,虚拟机的VCPU在物理CPU不同核心之间动态调度,另外,由于Linux还可能会将软中断,内存交换等进程调度到虚拟机正在使用的物理核心上,这些因素导致这些虚拟机相对于物理机的计 ...

  10. 算法笔记--lca倍增算法

    算法笔记 模板: vector<int>g[N]; vector<int>edge[N]; ][N]; int deep[N]; int h[N]; void dfs(int ...