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 相关文章推荐
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
javascript解析json实例详解
Nov 05 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
VUEX-action可以修改state吗
Nov 19 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 Javascript
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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
php使用百度天气接口示例
2014/04/22 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
PHP将二维数组某一个字段相同的数组合并起来的方法
2016/02/26 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
eclipse php wamp配置教程
2016/06/30 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
jquery 可排列的表实现代码
2009/11/13 Javascript
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
python+mysql实现教务管理系统
2019/02/20 Python
Python双链表原理与实现方法详解
2020/02/22 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
卡拉威高尔夫官方网站:Callaway Golf
2020/09/16 全球购物
学生自我鉴定范文
2013/10/04 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
文明班级建设方案
2014/05/15 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
文明家庭事迹材料
2014/12/20 职场文书
退伍军人感言
2015/08/01 职场文书