大话Ajax，详解~
Ajax
本節(jié)源碼???kt5zXMLHttpRequest對象
???????XMLHttpRequest 是瀏覽器接口對象，該對象的 API 可被JavaScript、VBScript 以及其它web 瀏覽器內(nèi)嵌的腳本語言調(diào)用，通過 HTTP 協(xié)議在瀏覽器和 web 服務(wù)器之間收發(fā) XML 或其它數(shù)據(jù)。XMLHttpRequest 可以與服務(wù)器實現(xiàn)異步交互，而無需讓整個頁面刷新，因此成為Ajax編程的核心對象。
Ajax的使用步驟
創(chuàng)建 XMLHttpRequest 對象
var xhr = new XMLHttpRequest();給定請求方式以及請求地址
xhr.open("get","http://www.baidu.com");發(fā)送請求
xhr.send();獲取服務(wù)器端給客戶端的響應(yīng)數(shù)據(jù)
xhr.onreadystatechange = function () {if(xhr.readyState == 4 && xhr.status == 2000){document.getElementById("span").innerHTML = xhr.readyState;alert(xhr.readyState);}}好了，我們先來用實際代碼來感受一下Ajax
先編寫一個Servlet
@WebServlet("/alvin/MyServlet") public class MyServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {PrintWriter writer = response.getWriter();writer.println("hello Ajax");writer.flush();writer.close();} }Jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html><head><title></title><!-- 定義好了http://localhost:8080/路徑,下面寫個別名就可以了 --><base href="<%=request.getContextPath()+"/"%>"></head><body><script type="text/javascript">function but() {var xhr = new XMLHttpRequest();xhr.open("post","alvin/MyServlet");xhr.send();xhr.onreadystatechange = function () {if(xhr.readyState == 4 && xhr.status == 200){alert(xhr.response);document.getElementById("span").innerHTML = xhr.responseText;}}}</script><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>JSON
???????JSON(JavaScriptObjectNotation) 是一種基于字符串的輕量級的數(shù)據(jù)交換格式。易于人閱 讀和編寫，同時也易于機器解析和生成。JSON是 JavaScript數(shù)據(jù)類型的子集。
???????在 JSON 未出現(xiàn)之前在 Ajax 中對于數(shù)據(jù)傳遞方式，會使用 XML 作為主要數(shù)據(jù)格式來傳輸數(shù)據(jù)。直到 JSON 出現(xiàn)后逐漸放棄使用 XML 作為數(shù)據(jù)傳輸格式。JSON 比 XML 更小、更快，更易解析。
JSON的語法規(guī)則
???????JSON是按照特定的語法規(guī)則所生成的字符串結(jié)構(gòu)。
???????大括號表示JSON 的字符串對象。{}
???????屬性和值用冒號分割。{"屬性":"value"}
???????屬性和屬性之間用逗號分割。{"屬性":"value","屬性":"value",...}
???????中括號表示數(shù)組。[{"屬性":"value"...},{"屬性":"value"...}]
Json
{“userid”:1,“username”:“admin”,“sex”:“male”}
數(shù)組
[{“userid”:1,“username”:“admin”},{“userid”:2,“username”:“oldlu”}]
Josn六種數(shù)據(jù)類型
???????string：字符串，必須要用雙引號引起來。
???????number：數(shù)值，與JavaScript的number 一致。
???????object：JavaScript的對象形式，{key:value}表示方式，可嵌套。
??????? array：數(shù)組，JavaScript的Array表示方式[value]，可嵌套。
??????? true/false：布爾類型，JavaScript 的boolean 類型。
??????? null：空值，JavaScript的null。
Jackson的使用
???????在JDK中并沒有內(nèi)置操作,JSON格式數(shù)據(jù)的API,因此使用處理JSON格式的數(shù)據(jù)需要借助第三方類庫
幾個常用的類庫
???????Gson: 谷歌開發(fā)的 JSON 庫，功能十分全面。
???????FastJson: 阿里巴巴開發(fā)的 JSON 庫，性能十分優(yōu)秀。
???????Jackson: 社區(qū)十分活躍且更新速度很快。被稱為“最好的Json 解析器”
Jeson下載地址
https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-annotationshttps://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core
https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind
在響應(yīng)中使用 Jackson處理 JSON格式數(shù)據(jù)的步驟：
???????添加 jackson-annotations.jar、jackson-core.jar、jackson-databind.jar
???????通過 jacksonAPI將 Java對象轉(zhuǎn)換 JSON格式
???????修改響應(yīng)頭，響應(yīng)類型為application/json
???????將結(jié)果基于字符輸出流推回客戶端瀏覽器
???????在頁面的中通過JavaScript的JSON.parse()函數(shù)將JSON格式的數(shù)據(jù)轉(zhuǎn)換為JavaScript對象
通過Json格式在響應(yīng)中傳遞單個對象
我們先建一個User實體類,用于后面的操作
public class User {private int userid;private String username;}//get set那些就不在文章里面寫了 @WebServlet("/alvin/Single") public class SingleObjectServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//創(chuàng)建User對象User user = new User();user.setUserid(1);user.setUsername("alvin");//使用Jackson的APL將User對象轉(zhuǎn)化為JSON格式的字符串對象ObjectMapper objectMapper = new ObjectMapper();//將User對象轉(zhuǎn)換為JSON格式對象String string = objectMapper.writeValueAsString(user);//設(shè)置相應(yīng)類型為application/jsonresponse.setContentType("application/json");PrintWriter writer = response.getWriter();writer.println(string);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title>JSON格式的單個對象響應(yīng)</title> </head> <body><script type="text/javascript" charset="UTF-8">function but() {var xhr = new XMLHttpRequest();xhr.open("post","alvin/Single");xhr.send();xhr.onreadystatechange = function () {if(xhr.readyState == 4 && xhr.status == 200){alert(xhr.response);//通過javaScript的內(nèi)置對象JSON中的parse函數(shù)將JSON格式的字符串對象轉(zhuǎn)換成JavaScirpt對象var parse = JSON.parse(xhr.responseText);alert(parse.userid + " " + parse.username);document.getElementById("span").innerHTML = parse.userid + "<br/>" + parse.username;}}}</script><span id="span"></span><input type="button" value="OK" onclick="but()"/> </body> </html>如果是多個對象呢?用List試試吧~
@WebServlet("/alvin/MoreObjectServlet") public class MoreObjectServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//創(chuàng)建第一個對象User user1 = new User(1,"張三");//創(chuàng)建第二個對象User user2 = new User(2,"alvin");//將多個對象放入到集合中List<User>list = new ArrayList<User>();list.add(user1); list.add(user2);//通過jackson將List轉(zhuǎn)換為JSON格式的字符串對象ObjectMapper objectMapper = new ObjectMapper();String string = objectMapper.writeValueAsString(list);System.out.println(string);response.setContentType("application/json");PrintWriter writer = response.getWriter();writer.print(string);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title>JSON格式的多個對象響應(yīng)</title> </head> <body> <script type="text/javascript" charset="UTF-8">function but() {var xhr = new XMLHttpRequest();xhr.open("post","alvin/MoreObjectServlet");xhr.send();xhr.onreadystatechange = function () {if(xhr.readyState == 4 && xhr.status == 200){alert(xhr.response);//通過javaScript的內(nèi)置對象JSON中的parse函數(shù)將JSON格式的字符串對象轉(zhuǎn)換成JavaScirpt對象var parse = JSON.parse(xhr.responseText);var temp = "";for(var i = 0; i < parse.length; i++){alert(parse[i].userid + " " + parse[i].username);temp += parse.userid + "<br/>" + parse.username;;}document.getElementById("span").innerHTML = temp;}}} </script><span id="span"></span><input type="button" value="OK" onclick="but()"/> </body> </html>Ajax在JSON中通過Map傳遞數(shù)據(jù)
@WebServlet("/alvin/MapModelServlet") public class MapModelServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {Map<String,Object> map = new HashMap<String, Object>();map.put("userid",1);map.put("username","alvin");ObjectMapper objectMapper = new ObjectMapper();String string = objectMapper.writeValueAsString(map);System.out.println(string);response.setContentType("application/json");PrintWriter writer = response.getWriter();writer.print(string);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title></title> </head> <body> <script type="text/javascript" charset="UTF-8">function but() {var xhr = new XMLHttpRequest();xhr.open("post","alvin/MapModelServlet");xhr.send();xhr.onreadystatechange = function () {if(xhr.readyState == 4 && xhr.status == 200){alert(xhr.responseText);//通過javaScript的內(nèi)置對象JSON中的parse函數(shù)將JSON格式的字符串對象轉(zhuǎn)換成JavaScirpt對象var parse = JSON.parse(xhr.responseText);alert(parse.userid + " " + parse.username);document.getElementById("span").innerHTML = parse.userid + "<br/>" + parse.username;}}} </script><span id="span"></span><input type="button" value="OK" onclick="but()"/> </body> </html>???????在 JSON 格式中可以直接使用 Map 作為傳遞數(shù)據(jù)的模型。因為 Map 結(jié)構(gòu)本身就是 key與value的結(jié)構(gòu)與JSON 格式對象模型完全匹配，所以我們可以直接將一個Map 對象轉(zhuǎn)換為JSON 格式的字符串對象。這對于我們來說是一件非常方便的事情，如果我們返回的數(shù)據(jù)并沒有對應(yīng)的模型來存放數(shù)據(jù)，那么我們可以通過Map 來解決。
在請求中通過JSON格式傳遞數(shù)據(jù)
???????我們除了可以在響應(yīng)中通過 JSON 格式來傳遞數(shù)據(jù)以外，在請求中也可以使用 JSON 格式傳遞數(shù)據(jù)。如果在請求中使用 JSON 格式傳遞數(shù)據(jù)，那么提交方式需要使用 POST 方式，通過 JavaScript 中的 JSON.stringify()函數(shù)將 JavaScript 對象轉(zhuǎn)換為 JSON 格式數(shù)據(jù)。通過 send方法將參數(shù)傳遞到 Servlet中，在 Servlet 中通過字符輸入流獲取 JSON格式數(shù)據(jù)。
@WebServlet("/alvin/RequestJosnServlet") public class RequestJosnServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//通過字符輸入流從請求體中獲取提交的JSON格式的數(shù)據(jù)String string = request.getReader().readLine();//使用Jackson將JSON格式的字符串對象轉(zhuǎn)換成Java對象ObjectMapper objectMapper = new ObjectMapper();User user = objectMapper.readValue(string,User.class);System.out.println(user.getUserid() + " " + user.getUsername());response.setContentType("application/json");PrintWriter writer = response.getWriter();writer.print(user);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title>JSON格式的單個對象響應(yīng)</title> </head> <body> <script type="text/javascript" charset="UTF-8">function but() {var id = document.getElementById("userid").value;var name = document.getElementById("username").value;var obj = {userid:id,username:name};var content = JSON.stringify(obj);var xhr = new XMLHttpRequest();xhr.open("post","alvin/Single");//發(fā)送xhr.send(content);alert(content);xhr.onreadystatechange = function () {if(xhr.readyState == 4 && xhr.status == 200){alert(xhr.response);//通過javaScript的內(nèi)置對象JSON中的parse函數(shù)將JSON格式的字符串對象轉(zhuǎn)換成JavaScirpt對象var parse = JSON.parse(xhr.responseText);alert(parse.userid + " " + parse.username);document.getElementById("span").innerHTML = parse.userid + "<br/>" + parse.username;}}} </script>ID<input name="userid" id="userid"/><br/>姓名<input name="username" id="username"/><span id="span"></span><input type="button" value="OK" onclick="but()"/> </body> </html>Jackson的常用注解
@JsonProperty
???????此注解用于屬性上，作用是把該屬性的名稱序列化為另外一個名稱，如把username屬性序列化為name，@JsonProperty("name")。
@JsonIgnore
???????此注解用于屬性或者方法上（一般都是定義在屬性上），用來完全忽略被注解的字段和 方法對應(yīng)的屬性，返回的json數(shù)據(jù)即不包含該屬性。
@JsonFormat
???????此注解用于屬性或者方法上（一般都是定義在屬性上），可以方便的把 Date類型屬性的值直接轉(zhuǎn)化為我們想要的樣式。如：@JsonFormat(pattern="yyyy-MM-ddhh:mm:ss")
Jackson工具類
package com.alvin.util;import java.util.List;import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.JavaType; import com.fasterxml.jackson.databind.ObjectMapper;/*** JSON轉(zhuǎn)換工具類*/ public class JsonUtils {// 定義jackson對象private static final ObjectMapper MAPPER = new ObjectMapper();/*** 將對象轉(zhuǎn)換成json字符串。* <p>Title: pojoToJson</p>* <p>Description: </p>* @param data* @return*/public static String objectToJson(Object data) {try {String string = MAPPER.writeValueAsString(data);return string;} catch (JsonProcessingException e) {e.printStackTrace();}return null;}/*** 將json結(jié)果集轉(zhuǎn)化為對象* * @param jsonData json數(shù)據(jù)* @param clazz 對象中的object類型* @return*/public static <T> T jsonToPojo(String jsonData, Class<T> beanType) {try {T t = MAPPER.readValue(jsonData, beanType);return t;} catch (Exception e) {e.printStackTrace();}return null;}/*** 將json數(shù)據(jù)轉(zhuǎn)換成pojo對象list* <p>Title: jsonToList</p>* <p>Description: </p>* @param jsonData* @param beanType* @return*/public static <T>List<T> jsonToList(String jsonData, Class<T> beanType) {JavaType javaType = MAPPER.getTypeFactory().constructParametricType(List.class, beanType);try {List<T> list = MAPPER.readValue(jsonData, javaType);return list;} catch (Exception e) {e.printStackTrace();}return null;}}Jquery的$ajax方法的使用
$.ajax()使用
???????在JQuery 中提供了對Ajax 的封裝，讓我們在使用Ajax技術(shù)時變得更加容易。在 JQuery中提供了很多的基于Ajax發(fā)送異步請求的方法,如：$.ajax()、$.get()、$.post()、$.getJSON()。
@WebServlet("/alvin/jqueryAjaxServlet") public class jqueryAjaxServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {PrintWriter writer = response.getWriter();writer.print("hello Jquery Ajax");writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {$.ajax({type:"post",url:"alvin/jqueryAjaxServlet",success:function (result) {$("#span").html(result);}});}</script> </head> <body><span id="span"></span><input type="button" value="OK" onclick="but()"/> </body> </html>$.ajax()中提交數(shù)據(jù)
???????在 data 屬性中我們可以通過兩種方式來指定需要提交的數(shù)據(jù)。一種是通過name=value&name=value 的結(jié)構(gòu)。另一種是通過 JavaScript 對象來指定提交數(shù)據(jù)。無論使用哪種方式在Servlet 中都是通過request.getParameter 方法根據(jù) name獲取 value的。
@WebServlet("/alvin/DataServlet") public class DataServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String userId = request.getParameter("id");String userName = request.getParameter("name");PrintWriter writer = response.getWriter();writer.print(userId + " " + userName);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html><head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {var userid = $("#userid").val();var username = $("#username").val();$.ajax({type:"post",url:"alvin/DataServlet",data:"id=" + userid + "&name=" + username,success:function (result) {$("#span").html(result);}});}</script></head><body>ID:<input type="text" id="userid"/><br/>姓名:<input type="text" id="username"/><br/><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>提交JSON格式數(shù)據(jù)
???????在$.ajax()中提交 JSON格式的數(shù)據(jù)需要使用 post方式提交，通過 JSON.stringify()函數(shù)將JavaScript對象轉(zhuǎn)換成JSON 格式的字符串。在Servlet 中通過字符輸入獲取提交的 JSON格式的數(shù)據(jù)。
@WebServlet("/alvin/JSONServlet") public class JSONServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String string = request.getReader().readLine();PrintWriter writer = response.getWriter();writer.print(string);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html><head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {var userid = $("#userid").val();var username = $("#username").val();$.ajax({type:"post",url:"alvin/JSONServlet",data:JSON.stringify({id:userid,name:username}),success:function (result) {$("#span").html(result);}});}</script></head><body>ID:<input type="text" id="userid"/><br/>姓名:<input type="text" id="username"/><br/><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>$.ajax()處理響應(yīng)中的JSON格式數(shù)據(jù)
???????$.ajax()方法會根據(jù) dataType 屬性中的值自動對響應(yīng)的數(shù)據(jù)做類型處理。如果響應(yīng)的是 一個 JSON 格式的數(shù)據(jù)，那么 dataType 的值為“JSON”,在回調(diào)函數(shù)中我們得到的直接就是JSON字符串轉(zhuǎn)換完的 JavaScript對象。不需要在使用JSON.parse()做格式的轉(zhuǎn)換處理。
@WebServlet("/alvin/JSONConnverServlet") public class JSONConnverServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("application/json");String string = request.getReader().readLine();PrintWriter writer = response.getWriter();writer.print(string);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html><head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {var userid = $("#userid").val();var username = $("#username").val();$.ajax({type:"post",url:"alvin/JSONConnverServlet",dataType:"json",data:JSON.stringify({id:userid,name:username}),success:function (result) {alert(result.id + " " + result.name);$("#span").html(result.id + " " + result.name);}});}</script></head><body>ID:<input type="text" id="userid"/><br/>姓名:<input type="text" id="username"/><br/><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>$.get()的使用
???????$.get()方法是$.ajax()方法基于 get方式發(fā)送異步請求的簡化版。
語法結(jié)構(gòu)
???????$.get(url,function(result))
???????$.get(url,data,function(result))
通過標(biāo)準(zhǔn)格式指定提交數(shù)據(jù)
???????$.get(url,”name=value&name=value”,function(result))
通過JavaScript對象指定提交數(shù)據(jù)
???????$.get(url,{userid:1,username:”oldlu”,......},function(result))
這里面使用的的還是DataServlet,前面寫過了
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {var userid = $("#userid").val();var username = $("#username").val();$.get("alvin/DataServlet","id=" + userid + "&name=" + username,function (result) {$("#span").html(result);})}</script> </head><body>ID:<input type="text" id="userid"/><br/>姓名:<input type="text" id="username"/><br/><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>$.post()的使用
???????$.post()方法是$.ajax()方法基于 post方式發(fā)送異步請求的簡化版。
語法結(jié)構(gòu)
???????$.post(url,function(result))
???????$.post(url,data,function(result))
通過標(biāo)準(zhǔn)格式指定提交數(shù)據(jù)
???????$.post(url,”name=value&name=value”,function(result))
通過JavaScript對象指定提交數(shù)據(jù)
???????$.post(url,{userid:1,username:”oldlu”,......},function(result))
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {var userid = $("#userid").val();var username = $("#username").val();$.post("alvin/DataServlet","id=" + userid + "&name=" + username,function (result) {$("#span").html(result);})}</script> </head><body>ID:<input type="text" id="userid"/><br/>姓名:<input type="text" id="username"/><br/><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>$.getJSON()的使用
???????$.getJSON()方法是$.ajax()方法基于 get 方式發(fā)送異步請求，并將響應(yīng)結(jié)果中 JSON 格式的字符串對象自動轉(zhuǎn)換為 JavaScript 對象。在使用該方法時要求返回的數(shù)據(jù)必須是 JSON 格式類型。$.getJSON()方法和resp.setContentType(“application/json”)是一起使用的。
語法結(jié)構(gòu)
???????$.getJSON(url,function(result))
???????$.getJSON(url,data,function(result))
通過標(biāo)準(zhǔn)格式指定提交數(shù)據(jù)
???????$.getJSON(url,”name=value&name=value”,function(result))
???????要求返回的數(shù)據(jù)格式必須是 JSON格式。
通過JavaScript對象指定提交數(shù)據(jù)
???????$.getJSON(url,{userid:1,username:”oldlu”,......},function(result))
???????要求返回的數(shù)據(jù)格式必須是 JSON格式。
@WebServlet("/alvin/GetJSONServlet") public class GetJSONServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String userId = request.getParameter("id");String userName = request.getParameter("name");Map<String,String> map = new HashMap<String, String>();map.put("userid",userId);map.put("username",userName);//使用前面寫的工具類String string = JsonUtils.objectToJson(map);response.setContentType("application/json");PrintWriter writer = response.getWriter();writer.print(string);writer.flush();writer.close();} } <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {var userid = $("#userid").val();var username = $("#username").val();$.getJSON("alvin/GetJSONServlet","id=" + userid + "&name=" + username,function (result) {//根據(jù)map的鍵alert(result.userid + " " + result.username)$("#span").html(result.userid + " " + result.username);})}</script> </head><body>ID:<input type="text" id="userid"/><br/>姓名:<input type="text" id="username"/><br/><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>serialize()方法的使用
???????將form表單中的數(shù)據(jù)自動拼接成 name=value&name=value結(jié)構(gòu)。
語法結(jié)構(gòu)
???????varparam=$(“form”).serialize();
???????param的值為：name=value&name=value
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html><head><base href="<%=request.getContextPath()+"/"%>"><title>Title</title><script src="js/jquery.js"></script><script type="text/javascript">function but() {var param = $("#form").serialize();$.ajax({type:"post",url:"alvin/DataServlet",data:param,success:function (result) {$("#span").html(result);}});}</script></head><body><form id="form">ID:<input type="text" name="id" id="userid"/><br/>姓名:<input type="text" name="name" id="username"/><br/></form><span id="span"></span><input type="button" value="OK" onclick="but()"/></body> </html>總結(jié)
以上是生活随笔為你收集整理的大话Ajax，详解~的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Hulu校招补录已开始，1年内工作经验也
- 下一篇： 【EXLIBRIS】名副其实