jQuery中的ajax用法案例
什么是 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中的ajax用法案例的更多相关文章
- Jquery中的Ajax
AJAX: * jQuery中的Ajax * 封装第一层 - 类似于原生Ajax的用法 * $.ajax() - 最复杂 * 选项 * url - 请求地址 * type - 请求类型,默认为GET ...
- 【Java EE 学习 33 上】【JQuery样式操作】【JQuery中的Ajax操作】【JQuery中的XML操作】
一.JQuery中样式的操作 1.给id=mover的div采用属性增加样式.one $("#b1").click(function(){ $("#mover" ...
- jQuery中操作Ajax方法小结
有时候,越深入去了解一个点,越发觉得自己无知,而之前当自己晓得一两个片面的点还洋洋自得,殊不知,这是多么讽刺 jQery对Ajax操作进行了封装,常见的 ajax()属于最底层的方法,使用频率很高的 ...
- $.ajax()方法详解 jquery中的ajax方法
jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(p ...
- jquery中的ajax方法参数
引用来自:http://www.cnblogs.com/tylerdonet/p/3520862.html jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String ...
- jquery中的ajax方法
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...
- 在jquery中使用AJAX
在jquery中使用封装好的AJAX会对开发效率起到极大的便利,因此掌握jquery中的一系列AJAX封装函数是做好页面数据交互的必备技能: 1.在之前,我们首先需要详细了解AJAX异步请求接受的五中 ...
- jquery中的ajax应用集锦
一,原生JS实现ajax: 1 2 3 4 5 6 7 8 9 10 11 function AjaxGet() { var xhrObj; ...
- JavaScript原生封装ajax请求和Jquery中的ajax请求
前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步 ...
随机推荐
- LINQ教程一:LINQ简介
一.为什么要使用LINQ 要理解为什么使用LINQ,先来看下面一个例子.假设有一个整数类型的数组,找到里面的偶数并进行降序排序. 在C#2.0以前,如果要实现这样的功能,我们必须使用'foreach' ...
- C#捕获鼠标消息
在C#中怎样禁用鼠标按键,我们可以通过ImessageFilter接口下的PreFilterMessage方法.Application类的AddMessageFilter方法,RemoveMessag ...
- EasyUI 搜索框
1.用法 (1).从标记创建.把 'easyui-searchbox' class 加入到 <input> 标记. <script type="text/javascrip ...
- Jquery easyui tree 一些常见操作
Tree: easyui tree的异步加载实现很简单,easyui的中文API文档中有实例(http://api.btboys.com/easyui/)——创建异步树形菜单,就是在tree node ...
- javascript时钟代码 DEMO-002
转载自:http://www.cnblogs.com/Mygirl/archive/2012/03/30/2425832.html 正常时间显示 复制代码 <SCRIPT language=ja ...
- jquery 表格排序,实时搜索表格内容
jquery 表格排序,实时搜索表格内容 演示 XML/HTML Code <table class="table-sort"> <thead> < ...
- B树、Trie树详解
查找(二) 散列表 散列表是普通数组概念的推广.由于对普通数组可以直接寻址,使得能在O(1)时间内访问数组中的任意位置.在散列表中,不是直接把关键字作为数组的下标,而是根据关键字计算出相应的下标. 使 ...
- 有2个表,结构相似,有一个字段关联,现在怎么把A表的数据添加到B表中,条件是A表不在B表的数据?? 请各位高手多多指点,是oracle的数据库
: insert into b(col1,col2 )select col1,col2 where not exists(select a.col1 from a where a.col1 = b.c ...
- : error C3861: “Sleep”: 找不到标识符
编译的时候:error C3861: “sleep”: 找不到标识符,是什么原因啊?编译的时候:error C3861: “sleep”: 找不到标识符,是什么原因啊?哪位好心的哥哥告诉我吧,分全是你 ...
- 电视不支持AirPlay镜像怎么办?苹果iPhone手机投屏三种方法
导读:苹果手机多屏互动功能在哪里?iPhone苹果手机没有AirPlay镜像怎么办?三种方法教你苹果iPhone手机怎么投影到智能电视上. 前言: 苹果iPhone手机投屏到电视设备上,需要使用到Ai ...