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"> $("#load").click(function () { $("#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"); 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
交互的全部控制权。
原文链接: 3.8.2 使用load方法