jQuery中的ajax应用

jQuery对ajax进行了3层封装。最底层为$.ajax()方法、第2层为load(),$get(),$post()方法、最高层为$.getScript(),$.getJSON()方法。

load方法通常用于从web服务器中获取静态的数据文件,主要功能是载入远程HTML代码并插入DOM中,结构为

load(url, [, data] [, callback])

url为请求HTML页面的URL地址,data为发送给服务器的key/value数据,callbakc为请求完成时的回调函数。

这个方法可以这么用:

$("#resText").load("test.html");

调用上面的代码后,test.html页面就会被载入到DOM元素中。

在实际开发中最常用的是get和post方法,这两个方法是jQuery的全局函数,之前讲的所以方法都是对jQuery对象进行操作。

$.get()方法使用GET方式进行异步请求,结构为:

$.get(url [, data] [, callback] [, type]);

url为请求页面的url地址,data为发送至服务器的key/value数据,callback为载入成功时的回调函数,type为服务器端返回内容的格式。

其它参数都是很简单的,主要是看一下回调函数有哪些参数:

function(data, textStatus){
  //data : 返回的内容,可以是xml, json, html片段等
  //textStatus : 请求状态: success, error, notmodified, timeout4种
}

$.get()和$.post()只有等textStatus状态为success时回调函数才会被调用。

如果返回的是xml文档,那么可以用jquery中的attr,find filter方法进行处理。

$post()方法实际上跟$get()方法的使用方法差不多,只是背后的原理不同。

接下来讲一下jQuery提供的最高层方法getScript和getJSON方法。

有时候,在页面初次加载的时候载入所有的js文件是没有必要的,我们可以动态引入js文件:

$(document.createElement("script")).attr("src", "test.js").appendTo("head");//方法1
$("<script type='text/javascript' src='test.js' />").appendTo("head");//方法2

$(function(){
  $("#send").click(function(){
    $.getScript("test.js");
  });
}).ready();//方法3

$.getScript方法也有回调函数,在js文件成功加载之后调用。方法3加载完JS文件之后,js文件会自动执行。

$.getJSON方法的使用方式和getScript一样,但是前者的回调函数一般需要写明要如何处理回载的JSON数据。回调函数有一个data的参数,表示JSON对象。

要遍历JSON对象可以使用jQuery中的$.each方法,这个方法用于遍历对象和数组。

$.each方法第1个参数为一个数组或一个对象,第2个参数为一个回调函数,回调函数拥有2个参数:第1个为对象的成员或数组的索引,第2个为对应变量或内容。如果回调函数中返回false那么遍历将结束。

将下来讲最底层的方法$.ajax方法,jQuery中所有的ajax方法都是通过这个方法实现的,也就是说这个方法可以替换之前讲的所有ajax方法。

它的结构为:

$.ajax(option);

这个方法只有一个参数,参数是一个对象,这个对象包含了所需要的请求设置,以及回调函数等信息,参数以key/value的形式存在,所有的参数都是可选的。重要的参数有url,type,complete,success等。

在使用jQuery之前,网页异步提交表单的时候只能把每个表单元素的值一个一个读出来然后格式化后发送到服务器,现在可以使用jQuery中的serialize方法。

    $("#send").click(function(){
        $.get("get1.php", $("#form1").serialize(), function(data, textStatus){
            $("#resText").html(data);
        });
    });

调用这个方法就相当表将表格里的数据用key/value方法发送给服务器端了。如果修改了表单,增加了表单元素,那么也不用将这段代码进行修改。

jQuery还为ajax请求设置了全局事件。$.ajaxStart()和$.ajaxStop(),分别在网页发起ajax请求和ajax请求完成时调用,这2个函数的参数为一个回调函数。

关于jQuery暂时先学习到这里,我认为写这些文章跟写程序一样,从来不会完成,应该要一直更新,目前jQuery学习告一段落,如果以后的项目中还需要学习关于jQuery新的知识,我一定再把学习心得写上来。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,108评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,699评论 1 296
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,812评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,236评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,583评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,739评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,957评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,704评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,447评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,643评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,133评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,486评论 3 256
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,151评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,889评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,782评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,681评论 2 272

推荐阅读更多精彩内容