030-jQuery Ajax load method

1. The load() method loads data from the server through an AJAX request, and puts the returned data in the specified element.

2. Grammar

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

3. Parameters

4. This method is the easiest way to get data from the server. It is almost equivalent to $.get(url,data,function(response,textStatus,jqXHR)), except that it is not a global function, and it has an implicit callback function. When a successful response is detected (for example: when the status is "success" or "notmodified"), load() sets the html content of the matched element as the returned data.

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

5. Load page fragment

5.1. The load() method allows us to specify a certain part of the remote document to be inserted. This is achieved through the special syntax of url parameters. If the string contains one or more spaces, the string immediately following the first space is the jQuery selector that determines the loaded content.

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

6. If the data provided is an object, use the POST method; otherwise, use the GET method.

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

7. Examples

7.1. Create a new dynamic WEB project named jQueryAjaxLoad

7.2. Writing 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. Writing 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. Writing test.xml

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

7.5. Write 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. Modify web.xml

7.8. Run the project

030-jQuery Ajax load method

Guess you like