0%

3.8.2 使用load方法

3.8.2 使用load方法

load方法是一个使用起来非常便捷的Ajax交互方法,它向远程url发送一个异步请求,甚至无须指定回调函数。load方法的说明如下。

方法 描述
load(url[,data][,callback]) 向远程url 发送异步请求,并直接将服务器响应插入当前jQuery对象匹配的DOM 元素之内。其中data 是一个形如{key1:value1,key2:value2...}JavaScript对象,表示发送请求的请求参数;callback用来指定Ajax交互成功后的回调函数。

程序示例

下面的程序示范了如何使用load方法进行Ajax交互。

项目结构

这是一个简单Java Web项目,项目结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
E:\workspace_web2\load
├─src
│ └─org
│ └─crazyit
│ └─jquery
│ └─web
│ └─ProServlet.java
└─WebContent
├─img
│ └─indicator.gif
├─index.html
├─jquery-3.1.1.js
└─WEB-INF
├─lib
└─web.xml

web.xml

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="UTF-8"?>
<web-app
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<display-name>load</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>

<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 使用jQuery的load方法 </title>
</head>

<body>
<h3>请输入你的信息:</h3>
<form id="userForm">
用户名:
<input type="text" name="user" />
<br /> 喜欢的图书:
<select multiple="multiple" name="books">
<option value="java">疯狂Java讲义</option>
<option value="javaee">轻量级Java EE企业应用实战</option>
<option value="ajax">疯狂前端开发讲义</option>
<option value="xml">疯狂XML讲义</option>
</select>
<br />
<input id="load" type="button" value="Load" />
</form>

<hr />
<div id="show"></div>

<script src="jquery-3.1.1.js" type="text/javascript"></script>

<script type="text/javascript">
// 为id为load的按钮绑定事件处理函数
$("#load").click(function () {
// 把响应插入到id为show的元素内
$("#show").load("pro", $("#userForm").serializeArray());
});
</script>
</body>

</html>

在该程序中使用了jQueryserializeArray()方法来获取请求参数,使用了load()方法来发送Ajax请求,没有指定回调函数,
$("#show").load()方法会把服务器的HTML响应将会填充到idshowdiv元素内.

服务器响应代码

该应用中处理服务器响应的ProServlet的代码如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
package org.crazyit.jquery.web;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.*;

@WebServlet(urlPatterns = "/pro")
public class ProServlet extends HttpServlet
{
private static final long serialVersionUID = 953022779069495267L;

public void service(HttpServletRequest request,
HttpServletResponse response) throws IOException, ServletException
{
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
// 获取请求参数
String user = request.getParameter("user");
String[] books = request.getParameterValues("books");
// 生成HTML字符串 响应
out.println(user + ",您好,现在时间是:" + new java.util.Date());
out.println("<br />您喜欢的图书如下:");
out.println("<ol>");
for (int i = 0; i < books.length; i++)
{
out.println("<li>" + books[i] + "</li>");
}
out.println("</ol>");
}
}

这是一个非常简单的Servlet,该Servlet负责生成一个HTML字符串响应。当用户浏览前面的index.html页面,并单击"load"按钮时,将可看到index.html页面会自动加载/pro这个URL的响应,而响应则显示在idshow<div>元素内。

从上面的程序可以看出,使用load方法发送Ajax请求简单便捷,开发者同样无须理会创建XMLHttpRequest对象的细节。如果开发者需要管理发送Ajax请求的细节,则可考虑使用jQuery.ajax(options)方法,该方法有点类似于Prototype库的Ajax.Request方法,使用jQuery.ajax方法可获得Ajax交互的全部控制权。

原文链接: 3.8.2 使用load方法