3.8.2 使用load方法

发表于 更新于 分类于 ， ， Waline： 本文字数： 3.8k 阅读时长 ≈ 3 分钟

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>

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

服务器响应代码

该应用中处理服务器响应的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的响应,而响应则显示在id为show的<div>元素内。

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