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

站长资源 2024/11/28 佚名

2 0 1

本文实例讲述了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文件：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ajax演示</title>
</head>
<body>
(www.jb51.net),提供大量脚本及素材供大家下载!
</body>
</html>

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.7.1.min.js">

上面的示例演示了如何使用Load方法.
提示:
① 我们要时刻注意浏览器缓存,  当使用GET方式时要添加时间戳参数 (net Date()).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。
说明:
通过远程 HTTP POST 请求载入信息。
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
先来看一个简单的实例

复制代码 代码如下:<"name"=>$_POST['name']));"htmlcode">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.7.1.min.js">

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


<input type="button" id="bnajax" value="ajax" onclick="ajaxTest()" />
<script type="text/javascript" >
 function ajaxTest()
 {
 $.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代码：


<"name"];
if($name=="netxu"){
  echo "对不起，".$name."数据存在";
}
else{
  echo "恭喜你，".$name."可以使用";
}
?>




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

jQuery,ajax,load,post

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“jQuery中ajax的load()与post()方法实例详解”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

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

JavaScript类型系统之正则表达式

jQuery Mobile弹出窗、弹出层知识汇总

评论“jQuery中ajax的load()与post()方法实例详解”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接