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代码  

$("#btnAjaxCallBack").click(function(event) {
  var username = $("#username").val();
 //发送Post请求, 返回后执行回调函数.
 $("#divResult").load("${ctx}/jqueryLoad", { "username": username}, function(responseText, textStatus, XMLHttpRequest)
{
 responseText = " Add in the CallBack Function! <br/>" + responseText +"<br/>" + textStatus + "," + XMLHttpRequest.status + "<br/>" + XMLHttpRequest.statusText ;
$("#divResult").html(responseText); //或者: $(this).html(responseText);
  });
});

 

 

 

 

一：如何使用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");