030-jQuery Ajax的load方法

1. load()方法通过AJAX请求从服务器加载数据, 并把返回的数据放置到指定的元素中。

2. 语法

$(selector).load(url,data,function(response,textStatus,jqXHR))

3. 参数

4. 该方法是最简单的从服务器获取数据的方法。它几乎与$.get(url,data,function(response,textStatus,jqXHR))等价, 不同的是它不是全局函数, 并且它拥有隐式的回调函数。当侦测到成功的响应时(比如: 当status为"success"或"notmodified"时), load()将匹配元素的html内容设置为返回的数据。

$('#btn1').click(function(){
	$("#result").load("test.html"); // 这是一个GET请求
});

5. 加载页面片段

5.1. load()方法允许我们规定要插入的远程文档的某个部分。这一点是通过url参数的特殊语法实现的。如果该字符串中包含一个或多个空格, 紧接第一个空格的字符串则是决定所加载内容的jQuery选择器。

$('#btn2').click(function(){
	$("#result").load("test.html #p1"); // 这是一个GET请求
});

6. 如果提供的数据是对象, 则使用POST方法; 否则使用GET方法。

$('#btn3').click(function(){
	$("#result").load("JqueryAjaxLoad.action #p1", "dataType=xml"); // 这是一个GET请求
});
$('#btn4').click(function(){
	$("#result").load("JqueryAjaxLoad.action", {dataType: "html"}); // 这是一个POST请求
});

7. 例子

7.1. 新建一个名为jQueryAjaxLoad动态WEB工程

7.2. 编写index.html

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery-Ajax的load()方法</title>
		<meta charset="utf-8" />

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#btn1').click(function(){
					$("#result").load("test.html"); // 这是一个GET请求
				});
				$('#btn2').click(function(){
					$("#result").load("test.html #p1"); // 这是一个GET请求
				});
				$('#btn3').click(function(){
					$("#result").load("JqueryAjaxLoad.action #p1", "dataType=xml"); // 这是一个GET请求
				});
				$('#btn4').click(function(){
					$("#result").load("JqueryAjaxLoad.action", {dataType: "html"}); // 这是一个POST请求
				});
				$('#btn5').click(function(){
					// 这是一个POST请求
					$("#result").load("JqueryAjaxLoad.action", {dataType: "html"}, function(response, textStatus, jqXHR){
						console.log('response=' + response + ', textStatus=' + textStatus);
					}); 
				});
			});
		</script>
		<style type="text/css">
			div {
				width: 450px;
				height: 100px;
				background-color: pink;
			}
		</style>
	</head>
	<body> 
  		<div id="result">结果区域</div><br />
  		<button id="btn1">load方法只有url</button> <button id="btn2">load方法只有url加载页面片段</button>
  		<button id="btn3">load方法get请求参数</button> <br /><br />
  		<button id="btn4">load方法post请求参数</button> <button id="btn5">load方法回调函数</button>
	</body>
</html>

7.3. 编写test.html

<!DOCTYPE html>
<html>
	<head>
		<title>测试文档</title>
		<meta charset="utf-8" />
	</head>
	<body> 
  		<h2>这是test.html文件中的h2</h2>
		<p id="p1">这是test.html文件中的p</p>
	</body>
</html>

7.4. 编写test.xml

<?xml version="1.0" encoding="UTF-8"?>
<h2>这是test.xml文件中的h2</h2>
<p id="p1">这是test.xml文件中的p</p>

7.5. 编写JqueryAjaxLoad.java

package com.rjbd.jal;

import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class JqueryAjaxLoad extends HttpServlet {
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String dataType = req.getParameter("dataType");

		FileReader fr = new FileReader(getServletContext().getRealPath("test." + dataType));
		BufferedReader br = new BufferedReader(fr);
		
		StringBuffer sb = new StringBuffer();
		String result = null;
		while((result = br.readLine()) != null) {
			sb.append(result);
		}
		br.close();
		fr.close();
		
		// 响应客户端的内容类型是text/plain 编码是UTF-8(包含字符编码和网页编码)
		resp.setContentType("text/plain;charset=UTF-8");
		resp.getWriter().write(sb.toString());
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
}

7.6. 修改web.xml

7.8. 运行项目

030-jQuery Ajax的load方法

猜你喜欢