jQuery ajax - 使用post() 方法实现异步加载远程数据的功能
本文转载于:猿2048网站➬jQuery ajax - 使用post() 方法实现异步加载远程数据的功能
实例
请求 test.php 网页,忽略返回值:
$.post("test.php");
TIY 实例
通过 AJAX POST 请求改变 div 元素的文本:
$("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){ $("span").html(result); }); });
定义和用法
post() 方法通过 HTTP POST 请求从服务器载入数据。
语法
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
参数 | 描述 |
---|---|
url | 必需。规定把请求发送到哪个 URL。 |
data | 可选。映射或字符串值。规定连同请求发送到服务器的数据。 |
success(data, textStatus, jqXHR) | 可选。请求成功时执行的回调函数。 |
dataType | 可选。规定预期的服务器响应的数据类型。 默认执行智能判断(xml、json、script 或 html)。 |
详细说明
该函数是简写的 Ajax 函数,等价于:
$.ajax({ type: 'POST', url: url, data: data, success: success, dataType: dataType });
根据响应的不同的 MIME 类型,传递给 success 回调函数的返回数据也有所不同,这些数据可以是 XML 根元素、文本字符串、JavaScript 文件或者 JSON 对象。也可向 success 回调函数传递响应的文本状态。
对于 jQuery 1.5,也可以向 success 回调函数传递 jqXHR 对象(jQuery 1.4 中传递的是 XMLHttpRequest 对象)。
大部分实现会规定一个 success 函数:
$.post("ajax/test.html", function(data) { $(".result").html(data); });
本例读取被请求的 HTML 片段,并插入页面中。
通过 POST 读取的页面不被缓存,因此 jQuery.ajaxSetup() 中的 cache 和 ifModified 选项不会影响这些请求。
注释:由于浏览器安全方面的限制,大多数 "Ajax" 请求遵守同源策略;请求无法从不同的域、子域或协议成功地取回数据。
注释:如果由 jQuery.post() 发起的请求返回错误代码,那么不会有任何提示,除非脚本已调用了全局的 .ajaxError() 方法。或者对于 jQuery 1.5,jQuery.post() 返回的 jqXHR 对象的 .error() 方法也可以用于错误处理。
jqXHR 对象
对于 jQuery 1.5,所有 jQuery 的 AJAX 方法返回的是 XMLHTTPRequest 对象的超集。由 $.post() 返回的 jQuery XHR 对象或 "jqXHR,"实现了约定的接口,赋予其所有的属性、方法,以及约定的行为。出于对由 $.ajax() 使用的回调函数名称便利性和一致性的考虑,它提供了 .error(), .success() 以及 .complete() 方法。这些方法使用请求终止时调用的函数参数,该函数接受与对应命名的 $.ajax() 回调函数相同的参数。
jQuery 1.5 中的约定接口同样允许 jQuery 的 Ajax 方法,包括 $.post(),来链接同一请求的多个 .success()、.complete() 以及 .error() 回调函数,甚至会在请求也许已经完成后分配这些回调函数。
// 请求生成后立即分配处理程序,请记住该请求针对 jqxhr 对象 var jqxhr = $.post("example.php", function() { alert("success"); }) .success(function() { alert("second success"); }) .error(function() { alert("error"); }) .complete(function() { alert("complete"); }); // 在这里执行其他任务 // 为上面的请求设置另一个完成函数 jqxhr.complete(function(){ alert("second complete"); });
更多实例
例子 1
请求 test.php 页面,并一起发送一些额外的数据(同时仍然忽略返回值):
$.post("test.php", { name: "John", time: "2pm" } );
例子 2
向服务器传递数据数组(同时仍然忽略返回值):
$.post("test.php", { 'choices[]': ["Jon", "Susan"] });
例子 3
使用 ajax 请求发送表单数据:
$.post("test.php", $("#testform").serialize());
例子 4
输出来自请求页面 test.php 的结果(HTML 或 XML,取决于所返回的内容):
$.post("test.php", function(data){ alert("Data Loaded: " + data); });
例子 5
向页面 test.php 发送数据,并输出结果(HTML 或 XML,取决于所返回的内容):
$.post("test.php", { name: "John", time: "2pm" }, function(data){ alert("Data Loaded: " + data); });
例子 6
获得 test.php 页面的内容,并存储为 XMLHttpResponse 对象,并通过 process() 这个 JavaScript 函数进行处理:
$.post("test.php", { name: "John", time: "2pm" }, function(data){ process(data); }, "xml");
例子 7
获得 test.php 页面返回的 json 格式的内容:
$.post("test.php", { "func": "getNameAndTime" }, function(data){ alert(data.name); // John console.log(data.time); // 2pm }, "json");
实例:
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $.post("/example/jquery/demo_test_post.asp", { name:"Donald Duck", city:"Duckburg" }, function(data,status){ alert("数据:" + data + "\n状态:" + status); }); }); }); </script> </head> <body> <button>向页面发送 HTTP POST 请求,并获得返回的结果</button> </body> </html>
更多专业前端知识,请上【猿2048】www.mk2048.com
原文地址:https://www.cnblogs.com/htmlandcss/p/11751142.html
- 采用一个自创的"验证框架"实现对数据实体的验证[扩展篇]
- 采用一个自创的"验证框架"实现对数据实体的验证[改进篇]
- Flash XSS检测脚本的简单实现
- 采用一个自创的"验证框架"实现对数据实体的验证[设计篇]
- 采用一个自创的"验证框架"实现对数据实体的验证[编程篇]
- 谈谈你最熟悉的System.DateTime[上篇]
- 12步轻松搞定Python装饰器
- 实用小工具,教你轻松转化Python通用数据格式
- 数据工程师常用的几个小工具(附python源代码)
- R语言的三种聚类方法
- 技能 | R语言的igraph画社交关系图示例
- 魔兽世界中招:一条命令行就能劫持你的游戏!
- R语言 apply函数家族详解
- 基于R语言的梯度推进算法介绍
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 设计模式系列之建造者模式构建实体类
- 元素可视区 client 系列
- 【阿里】在 nginx 中如何配置负载均衡
- 并发编程系列之JDK JUC实现内存缓存(支持并发)
- 10.1【前端开发】背景属性:样式中背景色和背景图片样式如何使用?
- 元素滚动 scroll 系列
- Java基础系列之fastjson parse多级json数据
- Linux系列之下载安装jdk-8u261-linux-i586.tar.gz
- 常见网页特效案例
- MySQL系列之体系结构原理学习笔记
- 触屏事件
- 10.2【前端开发】图片文件格式:常见的图片格式对比有何优劣以及如何使用Google的webp格式?
- uni-app 与 Vue H5 项目通讯
- Gridview][UpdateCommand的写法要点]
- MySQL系列之事务日志Undo log学习笔记