博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[jQuery] Ajax的应用
阅读量:5909 次
发布时间:2019-06-19

本文共 2646 字,大约阅读时间需要 8 分钟。

1. load()方法

load()方法是jQuery中最为简单和常用的Ajax方法,能载入远程HTML代码并插入DOM中,它的结构为:

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

url参数表示请求HTML页面的URL地址,data参数表示发送至服务器的key/value数据,callback参数表示请求完成时的回调函数,例如:

$(function(){  $("#send").click(function(){    $("#resText").load("test.html");  });});

load()方法的URL参数的语法结构为"url selector",比如只需加载test.html页面中class为"para"的内容,例如:

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

load()方法的传递方式根据参数data来自动指定,如果没有参数传递,则采用GET方式,反之则自动转换为POST方式,例如:

$("#resText").load("test.php", {name:"rain", age:"22"}, function(){});

load()方法的回调函数有3个参数,分别代表请求返回的内容、请求状态和XMLHttpRequest对象,例如:

$("#resText").load("test.html", function(  responseText, textStatus, XMLHttpRequest)) {}

2. $.get()方法和$.post()方法

load()方法通常用来从Web服务器上获取静态的数据文件,如果需要传递一些参数给服务器上的页面,那么可以使用$.get()或$.post()方法。

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

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

url参数代表请求的HTML页的URL地址,data参数代表发送至服务器的key/value数据会作为QueryString附加到请求URL中,callback参数代表载入成功时回调函数,type参数代表服务器端返回内容的格式,包括xml、html、script、josn、text和_default,例如:

$("#send").click(function(){  $.get("get1.php", {        username: $("#username").val(),        content: $("#content").val()  }, callback);});

$.get()方法的回调函数只有两个参数,例如:

function(data, textStatus) {}

data参数代表请求返回的内容,textStatus参数代表请求状态,而且回调函数只有当数据成功返回后才被调用,这与load()方法不同。

$.post()方法与$.get()方法的结构和使用方法相同。

3. $.getScript()方法和$.getJson()方法

有时候在页面初次加载时获取所需的全部JavaScript文件是没有必要的,jQuery提供了$.getScript()方法来直接加载.js文件,与加载一个HTML片段一样简单方法,例如:

$(function(){  $("#send").click(function(){    $.getScript("test.js");  });});

与其他Ajax方法一样,$.getScript()方法也有回调函数,它会在JavaScript文件成功载入后运行。

$.getJSON()方法用于加载JSON文件,与$.getScript()方法的用法相同,例如:

$(function(){  $("#send").click(function(){    $.getJSON("test.josn");  });});

4. $.ajax()方法

$.ajax()方法是jQuery最底层的Ajax实现,它的结构为:

$.ajax(options)

该方法只有1个参数,但在这个对象里包含了$.ajax()方法所需的请求设置以及回调函数等信息,参数以key/value的形式存在,所有参数都是可选的,常见的参数如下:

参数名称
类型 说明
url String 发送请求的地址。
type String 请求方式(GET或POST),默认为GET。
timeout Number 设置请求超时时间(毫秒)。
data Object或String 发送到服务器的数据。
dataType String 预期服务器返回的数据类型。
beforeSend Function 发送请求前可以修改XMLHttpRequest对象的函数。
complete Function 请求完成后调用的回调函数。
success Function 请求成功后调用的回调函数。
error Function 请求失败时被调用的函数。
global Boolean 默认为true,表示是否触发全局Ajax事件。

5. Ajax全局事件

通过jQuery提供的一些自定义全局函数,能够为各种 与Ajax相关的事件注册回调函数。例如当Ajax请求开始时,会触发ajaxStart()方法的回调函数,当Ajax请求结束时,会触发ajaxStop()方法的回调函数,这些方法都是全局方法,因此无论创建它们的代码位于何处,只要有Ajax请求发生时,就会触发它们,例如:

$("#loading").ajaxStart(function(){  $(this).show();});$("#loading").ajaxStop(function(){  $(this).hide();});

jQuery的Ajax全局事件还有几个方法,也可以在使用Ajax方法的过程中为其带来方便,如下表:

说明 说明
ajaxComplete(callback) Ajax请求完成时执行的函数。
ajaxError(callback) Ajax请求发生错误时执行的函数。
ajaxSend(callback) Ajax请求发送前执行的函数。
ajaxSuccess(callback) Ajax请求成功时执行的函数。

转载地址:http://wpppx.baihongyu.com/

你可能感兴趣的文章
apache2.2 虚拟主机配置
查看>>
关于android:configChanges的属性
查看>>
iotop
查看>>
angular多个控制器如何共享数据
查看>>
Ogre Compositor解析
查看>>
SQLServer 2008以上误操作数据库恢复方法——日志尾部备份
查看>>
[转]强制取消TFS2008中其它成员的签出文件
查看>>
Dapper - .Net 环境下一个简单对象映射的框架
查看>>
CSS SANS – 神奇!使用 CSS3 创建的字体
查看>>
很好的理解遗传算法的样例
查看>>
Retrofit
查看>>
java设计模式1--工厂方法模式(Factory Method)
查看>>
一个Form中2个按钮,PHP后台如何判断提交的是哪一个按钮
查看>>
android 回车键事件编程
查看>>
CSS3 Media Queries模板
查看>>
Android调用系统关机与重启功能
查看>>
UDK游戏开发基础命令
查看>>
VisualSvn Server介绍
查看>>
ExtJs + Struts2 + JSON
查看>>
我为什么喜欢Go语言
查看>>