- 浏览: 237583 次
- 性别:
- 来自: 葡萄牙
文章分类
最新评论
-
lightbulb:
...
jQuery中的动画与效果 -
kendezhu:
opportunity 写道 谢谢kendezhu分享,今天正 ...
jQuery 获取和设置select下拉框的值 -
opportunity:
谢谢kendezhu分享,今天正好用上了!
jQuery 获取和设置select下拉框的值
1.jQuery中的AJAX
使用jQuery在网站中应用AJAX实现各种效果将非常简单。
jQuery的AJAX工具包封装有三个层次。第一层是ajax()函数,它封装了一些基础的AJAX操作。第二层是load(),get(),post()等函数,它们是对ajax()函数的再次封装,这些函数的使用较为频繁。第三层是getScript(),getJSON()函数,它们进一步封装了get(),这些函数可以用于跨域操作。
http://kendezhu.iteye.com/blog/686888
①load(),get(),post()函数
这三个函数都是只有请求状态为success即请求成功时才调用回调函数callback
load(url,[data],[callback]) 返回值:jQuery 参数-url:请求的HTML页的URL地址String data:发送到服务器的key/value数据Object callback:请求完成时的回调函数(不需要是success),自动会将请求的结果,状态,XMLHttp对象传递给该函数 载入远程HTML文件代码并插入到匹配的DOM元素中
这个函数默认使用GET方式来传递,如果[data]参数有数据,就会自动转换为POST方式。
load.aspx
<form id="form1" runat="server">
<div id="load1">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
jQuery-Ajax-load()
</div>
<div id="load2">
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
load()函数页面
<input type="button" id="load1" value="load()" />
<div id="1"></div>
<div id="2"></div>
$(function(){
$("#load1").click(function(){$("#1").load("load.aspx")})
})
操作结果是将load.aspx页面的HTML文件代码加载并插入到了#1元素中
如将jQuery代码改成
$(function(){
$("#load1").click(function(){$("#1").load("load.aspx #load2",function(responseHtml,responseStatus,XMLHttpRequest){
$("#2").append("请求的HTML内容:"+responseHtml+"<br/>");
$("#2").append("请求状态:"+responseStatus+"<br/>");
$("#2").append("XMLHttp对象:"+XMLHttpRequest);
})})})
注意第一个参数,在请求页面后面使用了选择器来对请求的内容进行筛选,这里只向#1插入load.aspx中ID是load2的元素,另外这里又把回调函数参数加上了,请求后会将请求内容(这里为responseHtml,并且此时还没被筛选,是完整的load.aspx页面)请求状态及XMLHttp对象作为参数传给该函数。
补:如果不写回调函数的话,默认就是将responseHtml加到指定的选择器元素中,我们可以在回调函数中指定要加到哪个元素里,就像上面的代码$("#2").append("请求的HTML内容:"+responseHtml+"<br/>");做的那样
其中前面的$("#1")可以是一个不存在的容器 比如$("<div />").load(url,function(){ })这样会将返回的数据加到回调函数中指定的元素中,而不需要一个像#1这样存在的容器元素
jQuery.get(url,[data],[callback],[type]) 返回值:jQuery 参数-url:请求的HTML页的URL地址String data:发送到服务器的key/value数据Object callback:请求完成时的回调函数(不需要是success),自动会将请求的结果,状态,XMLHttp对象传递给该函数 Type:客户端请求的类型(JSON,XML,TEXT,HTML等最好大写http://kendezhu.iteye.com/blog/687110)String 使用GET方式进行异步请求
get()函数页面
<input type="button" id="get1" value="get()" />
<div id="2"></div>
$("#get1").click(function(){$.get("get.ashx",{QQ:encodeURI("333"),PW:encodeURI("kid")},function(responseData,responseStatus){
$("#2").append("服务器返回的数据:"+eval('('+responseData+')').res2+"<br/>");
$("#2").append("请求状态:"+responseStatus+"<br/>");
},"JSON")})
get.ashx
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/JSON";
string qq = context.Server.UrlDecode(context.Request.QueryString["QQ"]);
string pw = context.Server.UrlDecode(context.Request.QueryString["PW"]);
context.Response.Write("{res1:'"+qq+"',res2:'"+pw+"'}");
}
向get.ashx异步传递QQ,PW俩数据,传递以get方式传最终会以get.ashx?QQ=333&PW=kid的方式传过去,注意这里分别在客户端和服务器端使用的防止传递汉字等特殊字符串时丢失一些数据的加码和解码用到的函数。本来$.get()的第四个参数设置为"JSON"以及在服务器端设置好 context.Response.ContentType = "application/JSON";之后返回的对象(此处是esponseData)就是一个JSON对象http://kendezhu.iteye.com/blog/687110,但不知为何老是只返回一个JSON对象的字符串,所以用到了eval()函数http://jelly.iteye.com/blog/138707将该特殊的字符串转化成JSON对象(注意里面要加一个括号),之后就可用点操作符访问对象的属性了。但有一点要特别注意,就是在服务器端返回JSON对象时JSON对象的值如果是字符串要用单引号引起来,就像上面红色加亮显示的单引号那样。如{res1:['aa','bb']} 值是数组不用单引号,但数组里的元素是字符串自然要加单引号。
jQuery.post(url,[data],[callback],[type]) $.post()函数在使用上与$.get()函数并无太大不同,这里不再讲述。
②ajax()函数
$.ajax(options)是jQuery的底层Ajax实现,前面讲述的$.get,$.post等都是$.ajax简单易用的高层实现。$.ajax返回的是其创建的XMLHttpRequest对象。
返回值:XMLHttpRequest 参数-所有参数都是可选的,由于参数巨多,下面会一一介绍 这些参数都是通过json对象的形式存在的,如$.ajax({url:"ajax.php",timeout:20,data:{1:2,3:4}}) 通过Http请求加载远程数据
参数列表:
url:发送请求的地址(默认为当前页面)String
type:请求方式get或post(默认为get)String
timeout:请求超时时间,单位毫秒(默认为0)Number
data:发送到服务器的数据,key/value格式{1:2,3:4},GET请求中附加在URL后,如果值为数组{1:["2","3"]}将自动为不同值对应同一个名称,如1=2&1=3。查看processData的值决定是否自动转换为请求字符串格式Object
processData:默认为true,将发送数据转换为对象(技术上讲并非字符串)以配合默认内容类型application/x-www-form-urlencoded。如果要发送DOM树信息或其他不希望转换的信息,可以设置为false Boolean
contentType:发送数据至服务器时内容编码类型,默认是application/x-www-form-urlencoded,适合多数场合String
username:如果服务器需要登录访问时的用户名,一般不需要String
password:如果服务器需要登录访问时的密码,一般不需要String
accepts:主要类型有{xml:"application/xml,text/xml",html:"text/html",script:"text/javaScript,application/javaScript",
json:"application/json,text/javaScript",text:"text/plain",_default:"*/*"}用于告诉服务器可接受的数据类型,和dataType是对应的,不需要修改Object
dataType:预期服务器返回的数据类型,如果不指定,jQuery将自动根据HTTP包MIME信息返回responseXML或responseText,并作为回调函数参数传递。xml:返回XML文档 html:返回纯文本HTML信息,包含script元素 script:返回纯文本javaScript代码,不会自动缓存结果 json:返回JSON数据 jsonp:JSONP格式,使用JSONP形式调用函数时,如myurl?callback=? jQuery会自动替换?为正确的函数名,以执行回调函数String
beforeSend:发送前可修改XMLHttpRequest对象的函数,如添加自定义HTTP头,XMLHttpRequest对象是唯一参数Function
error:(自动判断为XML/HTML)请求失败时将调用此方法。此方法有三个参数:XMLHttpRequest对象,错误信息,可能捕获的错误对象Function
complete:请求完成后(无论成功或失败)回调函数。参数XMLHttpRequest对象,成功信息字符串Function
success:请求成功后回调函数。参数 服务器返回数据,返回状态Function
global:是否触发全局AJAX事件,如ajaxStart或ajaxStop 默认为true Boolean
ifModified:是否仅在服务器数据改变时获取新数据 默认为false Boolean
cache:是否从浏览器缓存中加载请求信息 默认为true Boolean
async:是否发送异步请求 默认为true Boolean
$.ajax()的使用比较麻烦,但却比较灵活,而且可以通过error参数定义在请求失败时调用的函数
ajax()函数页面
<input type="button" id="ajax1" value="ajax()" />
<div id="1"></div>
<div id="2"></div>
$("#ajax1").click(function(){$.ajax({type:"GET",url:"ajax.ashx",beforeSend:function(){$("#1").append("正在请求...")},data:{QQ:"222",PW:"sss"},success:function(data,status){$("#1").empty().append("数据"+eval('('+data+')').QQ);$("#2").empty().append("态"+status)},error:function(){$("#1").empty().append("请求失败");},dataType:"JSON"})
})
ajax.ashx
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
string qq = context.Request.QueryString["QQ"];
string pw = context.Request.QueryString["PW"];
context.Response.Write("{QQ:'"+qq+"',PW:'"+pw+"'}");
}
由于前面讲参数的讲解很详细,所以关于这里的ajax应用也不多说了
③getScript及getJSON函数
这两个函数进一步封装了$.get()函数,它们都支持跨域操作
⑴$.getScript(url,[callback]) 返回值:XMLHttpRequest 参数-url:请求的javaScript文件地址String callback:载入成功时回调函数(只有当Response的返回状态是success时才调用该方法,不传递参数)Function 通过GET方式请求载入并执行一个javaScript文件
getScript()函数页面
<input type="button" id="getScript1" value="getScript()" />
<div id="1"></div>
<div id="2"></div>
$("#getScript1").click(function(){$.getScript("getScript.js",function(){$("#2").append("载入并执行文件成功")})})
getScript.js
$(function(){$("#1").append("执行了getScript")})
⑵$.getJSON(url,[data],[callback]) 返回值:XMLHttpRequest 参数-url:请求的返回json数据的页面地址String data:发送到服务器端的key/value数据Object callback:载入成功时回调函数(只有当Response的返回状态是success时才调用该方法,传递参数)Function 通过GET方式请求载入JSON数据
使用方式跟$.get()没多大区别,在此不再讲述。只有一点值得一提,在$.getJSON()中传递给回调函数的数据肯定是json对象不需要像$.get()那样可能要用eval()函数转换。
由于javascript没有很好的IDE,所以出错的时候异常说明不是很明确,但对于以上函数一个经常出错的环节是服务器端返回的数据不规范,如不符合json格式,这个需要仔细检查。对于$.getScript()及$.getJSON()在返回状态不是success时不会执行回调函数。而$.get()及$.post()在返回状态不是success仍然执行回调函数,可以alert(typeof data)查看返回的数据是什么类型。 所以按正常步骤操作,如果没达到预期效果一般就是服务器端返回的数据没有符合格式。
对于返回json格式的数据,在确定是格式出错(很常用的检查方式就是用$.get()返回的data,在alert(data)时不报错,而在alert(eval('('+data+')'))时报错) 很有可能的出错环节就是你返回的json字符串(这里用的不是$.getJSON())的值没有用单引号括起来----正确格式{键:'值',键:[1,2,3]}{键:[{键:'值',键:'值'},{键:'值'}]}
发表评论
-
background-position与text-shadow
2012-04-01 09:46 964background-position http://w ... -
EasyUI2
2012-02-15 11:42 2132http://www.jeasyui.com/demo/ind ... -
EasyUI
2011-10-02 16:17 8214http://www.jeasyui.com/ http: ... -
::first-letter ::first-line
2011-08-07 17:37 902CSS的伪元素::first-letter与::first-l ... -
jQuery可视化数据显示
2011-06-24 16:03 1981http://www.oschina.net/project/ ... -
jQuery实例应用(二)
2011-04-21 23:29 9941.标签云 标签云是一种用于分类的tag标签,不过跟一般分类 ... -
jQuery中使用AJAX跨域操作
2011-04-15 16:21 1669浏览器安全模型规定,XMLHttpRequest、框架(Fr ... -
jQuery实例应用(一)
2011-04-14 17:15 2883暂时实现目前jQuery应用, ... -
jQuery学习链接
2011-04-12 13:24 872jQuery入门指南教程 http://www.cnbl ... -
jQuery的核心及工具
2011-04-09 20:17 12201.核心函数 jQuery()函数( ... -
jQuery与Ajax(三)
2011-04-09 14:38 10411.jQuery中的AJAX事件 在jQuery中有两类AJ ... -
jQuery与Ajax(二)
2011-04-07 21:59 16121.jQuery中的AJAX服务器端返回方式 目前支持的数据 ... -
jQuery中的动画与效果
2011-04-05 11:52 170171.基本效果 匹配元素从 ... -
jQuery中的事件处理
2011-04-04 11:29 34221.页面载入完毕响应事件 所谓页面载入完毕是指DOM元素载入 ... -
jQuery进行DOM操作
2011-03-31 17:32 27341.在元素内部插入DOM元素 ①插入到元素内部原有元素之后 ... -
jQuery操作得到的元素
2011-03-29 16:23 1985通过前面的讲解jQuery选择器我们已经能够快速而准确的找到我 ... -
jQuery选择器
2011-03-27 19:13 1674jQuery的强大,很大程度上得益于它更能全面而又简单易用的选 ... -
客户端Javascript
2010-12-12 13:38 1178更详细参考JavaScript手册 JavaSc ... -
table标签与meta标签
2010-12-10 14:47 1354有关HTML标签的使用请参考DHTML手册 table标签与 ...
相关推荐
资源名称:jQuery与Ajax教程 WORD版内容简介:本文档是jQuery与Ajax教程;jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写Javascript代码的习惯。希望本文档...
一个完整的jquery+ajax传送请求的实例
Asp.Net MVC之jQuery与AJAX操作实例
jquery是ajax最常用的一个框架。
Ajax里jQuery的ajax与ssh三框架的集成与总和
jQuery-ajax-用户名异步请求,转载请注明出处:https://blog.csdn.net/qq_40374604(如有需要欢迎留言,我一定会尽快解答)
jQuery_AJAX网页系统jQuery_AJAX网页系统
jquery与ajax调用,有代码 , 有说明,使ajax调用简单 需要使用 jquery调用ajax的朋友请下载!
用struts2+jquery的ajax的几个小例子,级联,自动补全等,没有数据库,直接就运行。
一个简单的Ajax实例——基于Ajax无需刷新技术开发的聊天室程序,实现多用户在网页上聊天,并可以实时更新信息。
Jquery跨域访问Web服务的demo源码
韩顺平 jquery框架 jquery与ajax整合
php 用jquery ajax登陆,这是一个最简单的jquery ajax登陆实例,看了这个相信聪明的你能写出更好的东东!
jquery和ajax的集成例子 jquery和ajax的集成例子 jquery和ajax的集成例子
jquery 的ajax用法,简单的入门ajax用法,供大家参考
jqueryajax jquery ajax
jQuery-ajax-json实现自动轮播图.rar
基于jquery的ajax的网络聊天室
一个JQuery +Ajax 封闭的一个GridView控件DataGrid
这是一个学习jquery-ajax的实例,实例中应用到了bean -json的转化, 页面上应用到了jqury如何解析返回的json数据。