jQuery中ajax的load()与post()方法实例详解
本文实例讲述了jQuery中ajax的load()与post()方法。分享给大家供大家参考,具体如下:
一、load()方法
在jQueryajax的load()方法能够载入远程HTML文件代码并插入至DOM中,这个与post,get还是有一点的区别,但可以快速在页面加载时就加载一个页面的html保存到dom中并且可执行哦。
load()方法默认使用GET方式,如果传递了data参数则使用Post方式.
传递附加参数时自动转换为POST方式。jQuery1.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文件:
<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> <title>ajax演示</title> </head> <body> 毛票票(www.nhooo.com),提供大量脚本及素材供大家下载! </body> </html>
然后建立ajax.html文件,记得引入jquery。
<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> <scripttype="text/javascript"src="./jquery-1.7.1.min.js"></script> <script> $(document).ready(function(){ $("#btn").click(function(){ $("#result").load("test.html",function(responseText,textStatus){ $("#display").append("<hr>responseText:"+responseText); $("#display").append("<hr>textStatus:"+textStatus); }); }); }); </script> </head> <body> <inputtype="button"value="测试"id="btn"/> <h2>显示的内容如下:</h2> <divid="result"></div> <h2>结果:</h2> <divid="display"></div> </body> </html>
上面的示例演示了如何使用Load方法.
提示:
①我们要时刻注意浏览器缓存, 当使用GET方式时要添加时间戳参数(netDate()).getTime()来保证每次发送的URL不同,可以避免浏览器缓存.
②当在url参数后面添加了一个空格,比如" "的时候,会出现"无法识别符号"的错误,请求还是能正常发送.但是无法加载HTML到DOM.删除后问题解决.
二、post()方法
在jquery中的ajax有二个数据发送模式,一种是get(),前面的文章有讲过,另一种是post()。这里再来给大家介绍一下,有需要了解的朋友可参考.
首先认识要jQuery.post(url,[data],[callback],[type])
对参数进行说明:
url:发送请求地址。
data:待发送Key/value参数。
callback:发送成功时回调函数。
type:返回内容格式,xml,html,script,json,text,_default。
说明:
通过远程HTTPPOST请求载入信息。
这是一个简单的POST请求功能以取代复杂$.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用$.ajax。
先来看一个简单的实例
<?phpechojson_encode(array("name"=>$_POST['name']));?>
然后建立ajax.html文件,注意js代码:
<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> <scripttype="text/javascript"src="./jquery-1.7.1.min.js"></script> <script> $(document).ready(function(){ $("#sub").click(function(){ $.post("testPost.php",{name:$("#name").val()},function(data,textStatus){ $("#result").append("data:"+data.name); $("#result").append("<br>textStatus:"+textStatus); },"json"); returnfalse; }); }); </script> </head> <body> <formaction="testPost.php"method="post"> <inputtype="text"name="name"id="name"> <inputtype="submit"id="sub"value="提交"> </form> <h2>显示的内容如下:</h2> <divid="result"></div> </body> </html>
用法2:(点击post数据返回数据)
<inputtype="button"id="bnajax"value="ajax"onclick="ajaxTest()"/> <scripttype="text/javascript"> functionajaxTest() { $.post("http://localhost:8012/t.asp",{"txt":"123"},function(data) { $("#divMsg").html(data); } ); } </script>
例3
JS代码:
<script> $(document).ready(function(){ $(".ajax_btn").click(function(){ $.post("ajax.php",//异步处理动态页面 {name:$(".name").val()},//获取类名为"name"文本的值,以NAME异步传值 function(data){//data为反回值,function进行反回值处理 $(".content").val(data);//获得得反回值后,将其填入到类名为"content"的文本框中 }); }) }) </script>
ajax.php代码:
<?php $name=$_POST["name"]; if($name=="netxu"){ echo"对不起,".$name."数据存在"; } else{ echo"恭喜你,".$name."可以使用"; } ?>
希望本文所述对大家jQuery程序设计有所帮助。