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


Posted in Javascript onJanuary 05, 2016

本文实例讲述了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>
三水点靠木(3water.com),提供大量脚本及素材供大家下载!
</body>
</html>

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="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>
<input type="button" value="测试" id="btn" />
<h2>显示的内容如下:</h2>
<div id="result"></div>
<h2>结果:</h2>
<div id="display"></div>
</body>
</html>

上面的示例演示了如何使用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。

先来看一个简单的实例

<?php echo json_encode(array("name"=>$_POST['name']));?>

然后建立ajax.html文件,注意js代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="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");
  return false;
 });
 });
</script>
</head>
<body>
<form action="testPost.php" method="post">
 <input type="text" name="name" id="name" >
 <input type="submit" id="sub" value="提交">
</form>
<h2>显示的内容如下:</h2>
<div id="result"></div>
</body>
</html>

用法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代码:

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

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

Javascript 相关文章推荐
JavaScript语句可以不以;结尾的烦恼
Mar 08 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
原生node.js案例--前后台交互
Feb 20 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 Javascript
vue中watch和computed的区别与使用方法
Aug 23 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 #Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 #Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 #Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 #Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 #Javascript
jQuery实现二级下拉菜单效果
Jan 05 #Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 #Javascript
You might like
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
smarty中js的调用方法示例
2014/10/27 PHP
PHP分页类集锦
2014/11/18 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
基于jquery的表头固定的若干方法
2011/01/27 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
Python中如何获取类属性的列表
2016/12/26 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
python获取linux系统信息的三种方法
2020/10/14 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
简单的大学生自我鉴定
2014/02/18 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
刑事起诉书范文
2015/05/19 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis
解析python中的jsonpath 提取器
2022/01/18 Python