jQuery ajax – load() 方法

load() 方法通過 AJAX 請求從伺服器載入資料，並把返回的資料放置到指定的元素中.
url 規定要將請求發送到哪個 URL。
data 可選。規定連同請求發送到伺服器的資料。
function(response,status,xhr)
額外的參數：
response - 包含來自請求的結果資料
status - 包含請求的狀態（"success", "notmodified", "error", "timeout" 或 "parsererror"）
xhr - 包含 XMLHttpRequest 對象

切記: 不能用$(this)調用load方法,因為此時的$(this)指代的不是你你想要的結果...可能是jquer.js

以下所用路徑請參見：
用法一 GET請求
範例程式碼如下：

<%@ include file="/common/meta.jsp" %>  <link rel="stylesheet" href="style/mystyle.css" type="text/css"> <script src="scripts/jquery-1.6.2.min.js" type="text/javascript"></script><script type="text/javascript" > $(function() {   $("#btnAjaxGet").click(function(event)  {   //發送Get請求:可指定負載檔案中的哪些項目,請使用jQuery選取器,常見的有: ID,CLASS,元 素選取器,參見以下調用    var username = encodeURI(encodeURI($("#username").val()));    // $("#divResult").load("jqueryLoad?username=" + username + "&un="+$("#username").val()+"&timestamp=" + (new Date()).getTime()); // $("#divResult").load("${ctx}/data/sample.dom.html .myList"); // $("#divResult").load("${ctx}/data/sample.dom.html img");  // $("#divResult").load("data/sample.dom.html div[title='myTitle1']");  $("#divResult").load("data/sample.dom.html #languages");  //$("#divResult").load("data/sample.dom.txt"); // $("#divResult").load("index.jsp");   });})</script>

JqueryLoadServlet .java

public class JqueryLoadServlet extends HttpServlet {private static final long serialVersionUID = 1L;public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {request.setCharacterEncoding("UTF-8");response.setContentType("text/html;charset=UTF-8");response.setCharacterEncoding("UTF-8");PrintWriter out = response.getWriter();String v = request.getParameter("username");String username = java.net.URLDecoder.decode((String) request.getParameter("username"), "UTF-8");System.out.println("v: " + v + ",username: " + username );StringBuilder tables = new StringBuilder();tables.append("<table id='languages' border='0' cellspacing='1'>");tables.append("<thead>");tables.append("<tr>");tables.append("<th>Languagetables</th>");tables.append("<th>Typetables</th>");tables.append("<th>Inventedtables</th>");tables.append("</tr>");tables.append("</thead>");tables.append("<tbody>");tables.append("<tr>");tables.append("<td>Javatables</td>");tables.append("<td>Statictables</td>");tables.append("<td>1995tables</td>");tables.append("</tr>");tables.append("<tr>");tables.append("<td>Rubytables</td>");tables.append("<td>Dynamictables</td>");tables.append("<td>1993tables</td>");tables.append("</tr>");tables.append("<tr>");tables.append("<td>Smalltalktables</td>");tables.append("<td>Dynamictables</td>");tables.append("<td>1972tables</td>");tables.append("</tr>");tables.append("<tr>");tables.append("<td>C++tables</td>");tables.append("<td>Statictables</td>");tables.append("<td>1983tables</td>");tables.append("</tr>");tables.append("</tbody>");tables.append("</table>");// out.println(username+" " + new java.util.Random().nextInt(100));out.print(tables.toString());out.flush();out.close();}}

注意事項：使用

$("#divResult").load("jqueryLoad?username=" + username + "&un="+$("#username").val()+"&timestamp=" + (new Date()).getTime());

發送參數時，必須對參數進行二次編碼操作：

var username = encodeURI(encodeURI($("#username").val()));

在後台也相應的進行解碼操作:

String v = request.getParameter("username");String username = java.net.URLDecoder.decode((String) request.getParameter("username"), "UTF-8");

用法二 POST請求

").click(function(event) { var username = $("#username").val();  //發送Post請求  $("#divResult").load("${ctx}/jqueryLoad", { "username": username});  });

以上調用就不會產生亂碼!
用法三 使用回呼函數 Js代碼
 

1. $("#btnAjaxCallBack").click(function(event) {   
2.   var username = $("#username").val();     
3.  //發送Post請求, 返回後執行回呼函數.   
4.  $("#divResult").load("${ctx}/jqueryLoad", { "username": username}, function(responseText, textStatus, XMLHttpRequest)
     
5. {   
6.  responseText = " Add in the CallBack Function! <br/>" + responseText +"<br/>" + textStatus + "," + XMLHttpRequest.status + "<br/>" + XMLHttpRequest.statusText ;
     
7. $("#divResult").html(responseText); //或者: $(this).html(responseText);  
8.   });   
9. });  

 

 

 

 

一：如何使用data

1.載入一個php檔案，該php檔案不含傳遞參數

 

$("#myID").load("test.php");
//在id為#myID的元素裡匯入test.php運行後的結果
2. 載入一個php檔案，該php檔案含有一個傳遞參數
 
$("#myID").load("test.php",{"name" : "Adam"});
//匯入的php檔案含有一個傳遞參數，類似於：test.php?name=Adam
3. 載入一個php檔案，該php檔案含有多個傳遞參數。註：參數間用逗號分隔
 
$("#myID").load("test.php",{"name" : "Adam" ，"site":"61dh.com"});
//匯入的php檔案含有一個傳遞參數，類似於：test.php?name=Adam&site=61dh.com
4. 載入一個php檔案，該php檔案以數組作為傳遞參數
 
$("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]});
//匯入的php檔案含有一個數組傳遞參數。
注意：使用load，這些參數是以POST的方式傳遞的，因此在test.php裡，不能用GET來擷取參數。
二：如何使用callback
比如我們要在load方法得到伺服器響應後，慢慢地顯示載入的內容，就可以使用callback函數。代碼如下：
 
$("#go").click(function(){
  $("#myID").load("welcome.php", {"lname" : "Cai", "fname" : "Adam", function(){
    $("#myID").fadeIn('slow');}
  );
});
 
備忘：
在load的url裡加上空格後面就可以跟選取器了。
例如：
 
    $("body").load("test.html #a");