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 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
AngularJS Controller作用域
Jan 09 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 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
用PHP和ACCESS写聊天室(六)
2006/10/09 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
javascript中的几个运算符
2007/06/29 Javascript
js自定义事件代码说明
2011/01/31 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
python中的代码编码格式转换问题
2015/06/10 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
公证书标准格式
2014/04/10 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python