jQuery_review之通過$.get()和$.post()方法來實現非同步載入，jquery_review.post
$.get()和$.post()這兩個方法，顧名思義，一個就是通過get方法來擷取資料，另外一個通過post方法來擷取資料。這兩個方法在具體有什麼區別呢？重點有三個方面的區別，第一個get傳送的資料理論在2KB之內，post方法原則上是不受限制的。第二個方面，一個在地址欄上會顯示當前的請求內容，這種在有使用者名稱和密碼的時候就不好了。另外一個是在請求體當中，這個雖然也不是很安全，但是至少要比GET方法要安全那麼一點點了。第三個，其實get方法最初是用來設計請求靜態內容的，而POST則是用來提交增刪改資料的，只是後來的這個區分沒那麼明顯而已了。
回頭來說 $.get()和$.post這兩個方法。這個兩個方法都可以接受四個參數，第一個參數是告訴jQuery我要到什麼地方去請求資料，第二個參數，是選擇性參數，是告訴jQuery我的請求資料是什麼，這些請求資料會變成請求資料的一部分，主要是用於傳遞key/value的值到服務端進行處理。第三個參數是回調參數，回調參數只有在調用成功的時候才會調用。這裡就有一個問題，如果回調不成功的話，應該怎麼辦？這時候就應該參考jQuery的全域方法中對於返回異常的處理了。最後一個參數，就是期望伺服器傳遞迴來的資料類型，這些資料類型包括但是不限於xml，html，json，script等等內容。尤其注意的是xml，xml這個東西其實和html是同源的，他們的老祖宗估計都是一個。所以，很多原本用於html的jquery方法，都是可以使用到xml上的，比如使用$()這個萬能工廠，將返回的xml資料變成一個object對象，使用.find()來找到子項目，使用attr找到屬性的值，使用.text()找到元素中的文本值。
還有一個要注意的是，前端寫了期望後端發送的資料是xml，那麼後端就應該按照前端的約定來發送資料：response.setContentType("text/xml;charset=UTF-8");
Server端的代碼如下：
@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {String name = req.getParameter("name");String address = req.getParameter("address");StringBuffer sb = new StringBuffer();sb.append("<div><span>hi! nice to meet you! ");sb.append(name).append(",(");sb.append(address).append("),");sb.append("how are you getting along?</span></div>");StringBuffer xmlSb = new StringBuffer();xmlSb.append("<book>") .append("<title>") .append("No ventured No gained") .append("</title>") .append("<publish>") .append("Chinses publish") .append("</publish>") .append("</book>");//resp.setContentType("text/html;charset=utf-8");resp.setContentType("text/xml;charset=utf-8");resp.getWriter().print(xmlSb.toString());}
前端的代碼如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <script type="text/javascript" src="jquery-1.8.3.js"></script><script type="text/javascript">$(function(){$("#getContentByAjax").click(function(){//$.post("test",{name:"czz",address:"address"},callBack,"html");//$.get("test",{name:"czz",address:"address"},callBack,"html");$.get("test",{name:"czz",address:"address"},callBack,"xml");});function callBack(data,textStatus){//$("#showText").html(data);var title=$(data).find("title").text();var publish = $(data).find("publish").text();$("#showText").text(title+" "+publish);}}); </script> </head> <body> <div id="showText"></div> <input type="button" id="getContentByAjax" value="sendAjax"> </body></html>
1.你指定datatype ：'json' 時，如果後台不轉化為json 格式是不行的.
2.parse用於從一個字串中解析出json對象。
3. 如果後台返回的是個json格式的對象，你直接可以通過 data點屬性就可以訪問.
後台如果是list 轉josn , 你可以通過 data[0]點屬性，當然你的datatype 為 json.
java 、JQuery問題，$ajax()、$post()、$get(),各在什情況下使用？它們的不同？
jQuery Ajax 執行個體 全解析
jQuery確實是一個挺好的輕量級的JS架構，能協助我們快速的開發JS應用，並在一定程度上改變了我們寫JavaScript代碼的習慣。
廢話少說，直接進入正題，我們先來看一些簡單的方法，這些方法都是對jQuery.ajax()進行封裝以方便我們使用的方法，當然，如果要處理複雜的邏輯，還是需要用到jQuery.ajax()的(這個後面會說到).
1. load( url, [data], [callback] ) ：載入遠程 HTML 檔案代碼並插入至 DOM 中。
url (String) : 請求的HTML頁的URL地址。
data (Map) : (選擇性參數) 發送至伺服器的 key/value 資料。
callback (Callback) : (選擇性參數) 請求完成時(不需要是success的)的回呼函數。
這個方法預設使用 GET 方式來傳遞的，如果[data]參數有傳遞資料進去，就會自動轉換為POST方式的。jQuery 1.2 中，可以指定選擇符，來篩選載入的 HTML 文檔，DOM 中將僅插入篩選出的 HTML 程式碼。文法形如 "url #some > selector"。
這個方法可以很方便的動態載入一些HTML檔案，例如表單。
範例程式碼：
$(".ajax.load").load("www.cnblogs.com/...2.html .post",
function (responseText, textStatus, XMLHttpRequest){
this;//在這裡this指向的是當前的DOM對象，即$(".ajax.load")[0]
//alert(responseText);//請求返回的內容
//alert(textStatus);//請求狀態：success，error
//alert(XMLHttpRequest);//XMLHttpRequest對象
});
這裡將顯示結果。
註：不知道為什麼URL寫絕對路徑在FF下會出錯，知道的麻煩告訴下。下面的get()和post()樣本使用的是絕對路徑，所以在FF下你將會出錯並不會看到返回結果。還有get()和post()樣本都是跨域調用的，發現傳上來後沒辦法擷取結果，所以把運行按鈕去掉了。
2. jQuery.get( url, [data], [callback] )：使用GET方式來進行非同步請求
參數：
url (String) : 發送請求的URL地址.
data (Map) : (可選) 要發送給伺服器的資料，以 Key/value 的索引值對形式表示，會做為QueryString附加到請求URL中。
callback (Function) : (可選) 載入成功時回呼函數(只有當Response的返回狀態是success才是調用該方法)。
這是一個簡單的 GET 請求功能以取代複雜 $.ajax 。請求成功時可調用回呼函數......餘下全文>>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
