jQuery中的ajax用法案例
2016-01-02 19:37
549 查看
什么是 AJAX?
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
使用 AJAX 的应用程序案例:谷歌地图、腾讯微博、优酷视频、人人网等等。
关于 jQuery 与 AJAX
jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
提示:如果没有 jQuery,AJAX 编程还是有些难度的。(详见JavaScript的ajax用法案例)
编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们解决了这个难题,我们只需要一行简单的代码,就可以实现 AJAX 功能。
在此我们仍将用户名的检测,作为案例讲解;
方法一:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-1.11.3.js"></script>//注意jQuery路径的拷贝!!! <script type="text/javascript"> $(function(){ $("#check").click(function(){ obj=$.ajax({url:"CheckUser?uname=" + $("#uname").val(),async:false}); $("#info").html(obj.responseText); }); }); </script> </head> <body> <table> <tr><td>用户名</td><td><input type="text" id="uname"></td></tr> <tr><td><input type="button" value="检测用户" id="check"></td><td><div id="info"></div></td></tr> </table> </body> </html>
方法二:
<script type="text/javascript" src="jquery-1.11.3.js"></script> <script type="text/javascript"> $(function(){ $("#check").click(function(){ $("#info").load("CheckUser?uname="+$("#uname").val());//用load方法。 // obj=$.ajax({url:"CheckUser?uname=" + $("#uname").val(),async:false}); //$("#info").html(obj.responseText); }); }); </script>
方法三:
<script type="text/javascript" src="jquery-1.11.3.js"></script> <script type="text/javascript"> $(function(){ $("#check").click(function(){ $.post("CheckUser",{uname:$("#uname").val()},function(data, Status){ $("#info").html(data);//注意这里如果用append来代替,不能返回数据。 }); //$("#info").load("CheckUser?uname="+$("#uname").val()); // obj=$.ajax({url:"CheckUser?uname=" + $("#uname").val(),async:false}); //$("#info").html(obj.responseText); }); }); </script>
注意:在用第三种即:post方法时需要将servlet中的doget方法移到dopost中,或者在dopost中加doGet(request,response);
相关文章推荐
- Jquery DatePicker基本使用方法
- 解决jquery.datatable.js无法使用colspan的问题
- 关于 jquery select 的一些记录,主要方便自己查看
- jquery实现简单的全选和反选功能
- jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
- jquery.cookie() 的使用(原)
- 《锋利的jQuery》阅读笔记
- jquery 数组 添加元素
- jquery选择器 之 获取父级元素、同级元素、子元素
- jQuery获取父元素
- jquery 插件的编写
- jQuery学习心得
- javascript中那些计算元素位置的方法和jQuery位置计算方法比较
- 图片懒加载的jQuery插件lazyLoad源码分析十八问
- juqery中checkbox的click事件
- jquery实现简单的全选和反选功能
- jquery 基础总结
- jQuery插件
- jQuery选择器性能
- jquery 1.9后如何对动态生成的元素绑定事件