jQuery中ajax的load()与post()方法实例详解

本文实例讲述了jQuery中ajax的load()与post()方法分享给大家供大家参考,具体如下:

一、load()方法

在jQuery ajax的load()方法能够载入远程 HTML 文件代码并插入至 DOM 中,这个与post,get还是有一点的区别,但可以快速页面加载时就加载一个页面的html保存到dom中并且可执行哦。

load()方法认使用 GET 方式,如果传递了data参数则使用Post方式.

传递附加参数时自动转换为 POST 方式。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector",认的选择器是"body>*".

讲解:

load是最简单的Ajax函数,但是使用具有局限性:

1.它主要用于直接返回HTML的Ajax接口 2.load是一个jQuery包装集方法,需要在jQuery包装集上调用,并且会将返回的HTML加载到对象中,即使设置了回调函数也不过不可否认load接口设计巧妙并且使用简单.下面通过示例来演示Load接口的使用:

load()函数:

函数介绍:load(url,[data],[callback]) 返回值:jQuery

参数说明:

url:待装入 HTML 网页网址。 data:(可选参数)发送至服务器的 key/value 数据。 callback:(可选参数)载入成功时回调函数

下面进行实例演示:

首先建立需要加载的test.html文件

rush:xhtml;"> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ajax演示 编程之家(www.jb51.cc),提供大量脚本及素材供大家下载!

然后建立ajax.html文件,记得引入jquery。

rush:js;"> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

显示内容如下:

结果:

display">

上面的示例演示了如何使用Load方法.

提示:

① 我们要时刻注意浏览器缓存,当使用GET方式时要添加时间戳参数 (net Date()).getTime() 来保证每次发送的URL不同,可以避免浏览器缓存.

② 当在url参数后面添加一个空格,比如" "的时候,会出现"无法识别符号"的错误,请求还是能正常发送. 但是无法加载HTML到DOM. 删除问题解决.

二、post()方法

在jquery中的ajax有二个数据发送模式,一种是get(),前面的文章有讲过,另一种是post()。这里再来给大家介绍一下,有需要了解的朋友可参考.

首先认识要jQuery.post(url,[callback],[type])

对参数进行说明:

url:发送请求地址。 data:待发送 Key/value 参数。 callback:发送成功时回调函数。 type:返回内容格式,xml,html,script,json,text,_default。

说明:

通过远程 HTTP POST 请求载入信息。

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。

先来看一个简单的实例

代码如下:
$_POST['name']));?>
然后建立ajax.html文件,注意js代码

rush:js;"> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
PHP" method="post">

显示内容如下:

用法2:(点击post数据返回数据)

rush:js;">

例3

JS代码

rush:js;">

ajax.PHP代码

rush:PHP;">

希望本文所述对大家jQuery程序设计有所帮助。

相关文章

IE6是一个非常老旧的网页浏览器,虽然现在很少人再使用它,但...
PHP中的count()函数是用来计算数组或容器中元素的个数。这个...
使用 AJAX(Asynchronous JavaScript and XML)技术可以在不...
Ajax(Asynchronous JavaScript and XML)是一种用于改进网页...
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX,我们可以...
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax...