jQuery 中的 Ajax
来源：互联网 发布：c语言源文件名的后缀 编辑：程序博客网 时间：2024/06/05 00:26
JQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()
load() 方法
- load()方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中. 它的结构是: load(url[, data][,callback])
* 程序员只需要使用 jQuery 选择器为 HTML 片段指定目标位置, 然后将要加载的文件的 url 做为参数传递给 load() 方法即可
load() 方法 —- 细节
- 传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式
- 对于必须在加载完才能继续的操作, load() 方法提供了回调函数, 该函数有三个参数: 代表请求返回内容的 data; 代表请求状态的 textStatus 对象(其值可能为: succuss, error, notmodify, timeout 4 种)和 XMLHttpRequest 对象
- 方法的返回值是 jQuery
- 如果只需要加载目标 HTML 页面内的某些元素, 则可以通过 load() 方法的 URL 参数来达到目的. 通过 URL 参数指定选择符, 就可以方便的从加载过来的 HTML 文档中选出所需要的内容. load() 方法的 URL 参数的语法结构为 “url selector”(注意: url 和 选择器之间有一个空格)
var xmlHpptReq=$.get("base01.jsp",{username:"aa",psw:"8888"});var xmlHpptReq=$.get("base01.jsp",$("#form1").serialize());- 使用 serialize() 方法可以自动完成对参数的 url 编码
- 因为该方法作用于 jQuery 对象, 所以不光只要表单能使用, 其它选择器选取的元素也能使用它.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script language="JavaScript" src="../js/jquery-1.4.2.js"> </script> <style type="text/css"> div, span { width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } div.mini { width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family: Roman; } div.visible { display: none; } </style> <!--引入jquery的js库--> </head> <body> <form action="" name="form1" id="form1"> <input type="text" name="username" id="username" value="zhang"> <br> <input type="text" name="psw" id="psw" value="99999"> <br> <input type="button" id="b1" value="登陆"> </form> <div id="one"> </div> </body> <script language="JavaScript"> $("#b1").click(function(){ /* * load(url,data,callback) * * jquery对象调用load()方法，返回内容会自动写入jquery对象内 * * url：请求路径 * * data：请求数据，以key/value形式，json数据格式 * * callback：回调函数，function(data,textStatus,XMLHttpRequest){} * * data：代表请求返回内容 * * textStatus：代表请求状态,其值可能为: succuss, error, notmodify, timeout 4 种 * * XMLHttpRequest对象 * * * load()方法的请求类型： * * 如果客户端没有向服务器端发送请求数据，那么请求类型就是"GET"方式 * * 如果客户端向服务器端发送请求数据，那么请求类型就是"POST"方式 * * load()方法的请求类型，是根据有没有向服务器端发送数据决定的。 */ //构建json数据 var json = { username:$("#username").val(), psw:$("#psw").val() } $("#one").load("load01.jsp",json,function(data,textStatus,XMLHttpRequest){ alert(data); }); }); </script></html>jsp页面：
<%@ page language="java" pageEncoding="UTF-8"%><% System.out.println("请求类型： "+request.getMethod()); System.out.println("connection server success!"); System.out.println("username = "+request.getParameter("username")); System.out.println("psw = "+request.getParameter("psw")); out.println("Hello World!");%>结果： 
$.get() (或$.post()) 方法
$.get()方法使用 GET 方式来进行异步请求. 它的结构是:$.get(url[, data][, callback][, type]);$.get()方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等; textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.
方法的返回值:XMLHttpRequest对象$.get()和$.post()方法是 jQuery 中的全局函数, 而 find() 等方法都是对 jQuery 对象进行操作的方法
get方法：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script language="JavaScript" src="../js/jquery-1.3.1.js"></script> <style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div.visible{ display:none; } </style> <!--引入jquery的js库--> </head> <body> <form action="" name="form1" id="form1"> <input type="text" name="username" id="username" value="zhang"><br> <input type="text" name="psw" id="psw" value="99999"><br> <input type="button" id="b1" value="登陆"> </form> <div id="one"> </div> </body><script language="JavaScript"> $("#b1").click(function(){ /* * get(url,data,callback,type) * * url：请求路径 * * data：请求数据，以key/value形式，json数据格式 * * callback：function(data,textstatus){} * * data：代表返回的内容，可以是 XML 文档, JSON 文件, HTML 片段等 * * textstatus：代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种 * * type：返回内容格式，xml, html, script, json, text, _default。 * * * 返回值:XMLHttpRequest * * * get()方法无论发送不发送请求数据，请求类型都是"GET"方式 */ var json = { username:$("#username").val(), psw:$("#psw").val() } $.get("get.jsp",json,function(data,textstatus){ alert(data); }); });</script></html>jsp页面:
<%@ page language="java" pageEncoding="UTF-8"%><% System.out.println(request.getMethod()); System.out.println("get connection server success!"); System.out.println(request.getParameter("username")); System.out.println(request.getParameter("psw")); out.println("Hello World!");%>
post方式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script language="JavaScript" src="../js/jquery-1.3.1.js"></script> <style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div.visible{ display:none; } </style> <!--引入jquery的js库--> </head> <body> <form action="" name="form1" id="form1"> <input type="text" name="username" id="username" value="zhang"><br> <input type="text" name="psw" id="psw" value="99999"><br> <input type="button" id="b1" value="登陆"> </form> <div id="one"> </div> </body><script language="JavaScript">// $("#b1").click(function(){// // /*// * get(url,data,callback,type)// * * url：请求路径// * * data：请求数据，以key/value形式，json数据格式// * * callback：function(data,textstatus){}// * * data：代表返回的内容，可以是 XML 文档, JSON 文件, HTML 片段等// * * textstatus：代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种// * * type：返回内容格式，xml, html, script, json, text, _default。// * // * * 返回值:XMLHttpRequest// * // * * get()方法无论发送不发送请求数据，请求类型都是"GET"方式// */// var json = {// username:$("#username").val(),// psw:$("#psw").val()// }// // $.get("get.jsp",json,function(data,textstatus){// alert(data);// });// // }); $("#b1").click(function(){ /* * post(url,data,callback,type) * * url：请求路径 * * data：请求数据，以key/value形式，json数据格式 * * callback：function(data,textstatus){} * * data：代表返回的内容，可以是 XML 文档, JSON 文件, HTML 片段等 * * textstatus：代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种 * * type：返回内容格式，xml, html, script, json, text, _default。 * * * 返回值:XMLHttpRequest * * * post()方法无论发送不发送请求数据，请求类型都是"POST"方式 */ var json = { username:$("#username").val(), psw:$("#psw").val() } $.post("get.jsp",json,function(data,textstatus){ alert(data); }); });</script></html>jsp页面
<%@ page language="java" pageEncoding="UTF-8"%><% System.out.println(request.getMethod()); System.out.println("post connection server success!"); System.out.println(request.getParameter("username")); System.out.println(request.getParameter("psw")); out.println("Hello World!");%>
序列化元素
- jQuery 为准备 “发送到服务器的 key/value 数据” 提供了一个简化的方法: serialize(). 该方法作用于一个 jQuery 对象, 能将 DOM 元素内容序列化为字符串, 用于 Ajax 请求.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>ddd</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script language="JavaScript" src="../js/jquery-1.3.1.js"></script> <style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div.visible{ display:none; } </style> <!--引入jquery的js库--> </head> <body> <form action="" name="form1" id="form1"> <input type="text" name="username" id="username" value="zhang"><br> <input type="text" name="psw" id="psw" value="99999"><br> <input type="button" id="b1" value="登陆"> </form> <div id="one"> </div> </body><script language="JavaScript">// $("#b1").click(function(){// // /*// * get(url,data,callback,type)// * * url：请求路径// * * data：请求数据，以key/value形式，json数据格式// * * callback：function(data,textstatus){}// * * data：代表返回的内容，可以是 XML 文档, JSON 文件, HTML 片段等// * * textstatus：代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种// * * type：返回内容格式，xml, html, script, json, text, _default。// * // * * 返回值:XMLHttpRequest// * // * * get()方法无论发送不发送请求数据，请求类型都是"GET"方式// */// var json = {// username:$("#username").val(),// psw:$("#psw").val()// }// // $.get("get.jsp",json,function(data,textstatus){// alert(data);// });// // }); $("#b1").click(function(){ /* * post(url,data,callback,type) * * url：请求路径 * * data：请求数据，以key/value形式，json数据格式 * * callback：function(data,textstatus){} * * data：代表返回的内容，可以是 XML 文档, JSON 文件, HTML 片段等 * * textstatus：代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种 * * type：返回内容格式，xml, html, script, json, text, _default。 * * * 返回值:XMLHttpRequest * * * post()方法无论发送不发送请求数据，请求类型都是"POST"方式 */// var json = {// username:$("#username").val(),// psw:$("#psw").val()// } //序列化元素 var json = $("#form1").serialize(); $.post("get.jsp",json,function(data,textstatus){ alert(data); }); });</script></html> 0 0
- 【jQuery】jQuery中的Ajax
- ajax与Jquery中的Ajax
- Jquery(六)jquery中的Ajax
- jQuery 中的ajax部分
- JQuery中的Ajax
- jQuery中的ajax应用
- jquery中的ajax
- Jquery 中的AJAX
- jquery中的ajax
- jQuery中的AJAX
- jQuery中的 Ajax
- jquery中的ajax使用
- jQuery中的Ajax 详解
- jQuery中的ajax
- JQuery 中的ajax
- jquery中的ajax方法
- Jquery中的ajax
- jQuery中的Ajax应用
- jQuery中$.get、$.post、$.getJSON和$.ajax的用法
- Eclipse中jsp、js文件编辑时，卡死现象解决汇总
- 自定义相册
- 技术积累（二）redis
- java简单实现分页查询
- jQuery 中的 Ajax
- 千视通视频大数据结构化平台
- renderer:function参数介绍
- Android：Android Studio代码混淆配置
- 项目的js和el总结
- web servicce
- <转>Hadoop入门介绍
- jsp el表达式不能使用
- oracle的完整性约束
