jQuery $.post() 方法使用案例
来源:互联网 发布:数据产品经理工具 编辑:程序博客网 时间:2024/05/28 05:18
jQuery post() 方法使用案例
注:需要引入jquery文件,本案例使用的是 jquery-2.0.0.js
1、post.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title><script type="text/javascript" src="js/jquery-2.0.0.js"></script><script type="text/javascript">$(function() {/* 当密码框失去焦点时,触发post异步请求 */$("#pwd").blur(function() {$.post("login.do", {name : $("#name").val(),pwd : $("#pwd").val()}, function(data) {alert(data.uid + "," + data.realname);//当第四个参数设置为json时,不需要手动解析,而是由jquery框架帮助我们实现了解析}, "json");});});</script></head><body><form>用户名: <input type="text" name="name" id="name"><br /> 密码: <inputtype="password" name="pwd" id="pwd"><br /></form></body></html>
2、UserServlet.java
@WebServlet("/login.do")public class PostServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// 接收中文乱码处理request.setCharacterEncoding("UTF-8");// 响应中文乱码处理response.setContentType("text/html; charset=UTF-8");// 接收用户输入String name = request.getParameter("name");String pwd = request.getParameter("pwd");System.out.println(name + "," + pwd);// 响应信息(模拟json字符串格式返回)PrintWriter out = response.getWriter();out.write("{\"uid\":1,\"realname\":\"张三\"}");out.flush();out.close();}}
详细的的方法说明参考w3school
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)
可选。规定预期的服务器响应的数据类型。
默认执行智能判断(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");
- jQuery $.post() 方法使用案例
- jquery post方法使用
- jquery使用post方法下载
- jquery中$.post()方法使用
- jQuery $.get()方法使用案例
- 关于jQuery使用get和post方法
- Django配合使用Jquery post方法
- jquery 使用$.ajax post方法提交数据
- jquery的Post方法$.post()
- HTTP方法:GET vs POST及jQuery使用这两种方法
- jQuery ajax --post() 方法
- jQuery.post() 方法用法
- JQUERY $.post 方法
- jquery post方法
- jQuery ajax - post() 方法
- jQuery ajax - post() 方法
- JQuery AJAX $.post()方法
- jQuery ajax - post() 方法
- 断字符串是否相同,使用compare方法
- 集合之全排列
- Java常用数学函数总结及求数组的平均数、中位数和众数
- java使用axis2调用webservice接口实例
- 使用docker部署nginx容器
- jQuery $.post() 方法使用案例
- Redis集群相关操作(windows系统)
- 编辑器远程FTP连接
- Elasticsearch5.x安装IK分词器以及热词配置
- Android Ndk开发入门(实现静态注册,动态注册)
- 查看当前文档某个元素的子节点
- Linux下部署Tomcat ,然后部署web项目
- 详解光纤网卡和HBA卡的区别
- 123213