位置: 编程技术 - 正文
jQuery中ajax的load()与post()方法实例详解
编辑：rootadmin推荐整理分享jQuery中ajax的load()与post()方法实例详解，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
本文实例讲述了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文件：
然后建立ajax.html文件，记得引入jquery。
上面的示例演示了如何使用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。
先来看一个简单的实例然后建立ajax.html文件，注意js代码：
用法2:(点击post数据返回数据)
例3
JS代码：
ajax.php代码：
希望本文所述对大家jQuery程序设计有所帮助。
简述jQuery ajax的执行顺序 jQuery中的Ajax的async默认是true(异步请求),如果想一个Ajax执行完后再执行另一个Ajax,需要把async=false即可.代码如下:functionTestAjax(){varUserName=$("#txtUserName").val()
基于HTML+CSS，jQuery编写的简易计算器后续（添加了键盘监听） 之前发布了一款简易的计算器，今天做了一下修改，添加了键盘监听事件，不用再用鼠标点点点啦JS代码：varyunSuan=0;//运算符号，0-无运算;1-加法;2-减法;
详解jQuery Mobile自定义标签 本文实例讲解了jQueryMobile自定义标签，分享给大家供大家参考，具体内容如下规划产品国际化的需求时，涉及到PCWeb，移动Web，和各app。设计了多个版本
标签: jQuery中ajax的load()与post()方法实例详解
本文链接地址:https://www.jiuchutong.com/biancheng/379265.html 转载请保留说明！
![[cocos2dx学习笔记]用cocos2dx3.X完成塔防游戏王国保卫战--简介(cocos2dx入门)](https://www.jiuchutong.com/image/20240129/1706502548.jpg)
