0%

3.8.4 使用get或post方法

发表于 更新于 分类于 ， ，

3.8.4 使用get或post方法

发送get请求

jQuery提供了以下几种简便方法来发送GET请求。

get方法

方法 描述
jQuery.get(url,[data],[callback],[type]) 向url发送异步的GET请求。
该方法参数说明如下:
1. url参数表示要请求的URL
2. data参数是一个JavaScript对象,用于指定请求参数;
3. callback参数指定服务器响应成功时的回调函数,该函数是一个形如function(data,statusText,jqXHR){...}的函数。该函数的data参数是服务器响应,statusText参数是服务器响应类型的描述信息,jqXHR参数表示发送异步请求的XMLHttpRequest对象,
4. type参数指定服务器响应数据的类型,支持xml、json、script、text、html这几种类型。

getJSON方法

方法 描述
jQuery.getJSON(url [,data] [,callback]) 该函数是前一个函数的JSON版本,相当于指定type参数为”json"。
### getScript方法 ###
方法 描述
jQuery.getScript(url [,data] [,callback]) 该函数是第一个函数的Script版本,相当于指定type参数为”script"。

程序示例

下面通过一个简单的Java Web项目来做示范,项目结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
E:\workspacne_jQuery\get
├─src\
│ └─org\
│   └─crazyit\
│     └─jquery\
│       └─web\
│         └─ProServlet.java
└─WebContent\
  ├─get.html
  ├─getScript.html
  ├─img\
  │ └─indicator.gif
  ├─jquery-3.1.1.js
  ├─META-INF\
  │ └─MANIFEST.MF
  ├─script.jsp
  └─WEB-INF\
    ├─lib\
    └─web.xml

使用get方法

get.html页面示范了如何使用jQuery.get()方法来发送异步GET请求。

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
41
42
43
44
45
46
47
48
49
50
<!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的get方法 </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="发送异步GET请求" />
	</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 () {
			// 指定向pro发送请求，以id为userForm表单里各表单控件的值作为请求参数
			$.get(
				// 请求的URL
				"pro",
				// 请求的参数
				$("#userForm").serializeArray(),
				// 收到响应时要调用的回调函数
				// 第1个参数data表示服务器的响应,
				// 第2个参数表示服务器的响应状态
				function (data, statusText) {
					$("#show").empty();
					$("#show").append("服务器响应状态为:" + statusText + "<br>");
					$("#show").append("服务器响应内容为:" + data);
				},
				// 要求服务器的响应类型为HTML
				"html"
			);
		});
	</script>
</body>

</html>

该页面代码使用了jQuery.get()方法向pro这个URL发送异步GET请求,处理pro这个URL的ProServlet.java的代码如下:

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
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(",您喜欢的图书如下：");
		out.println("<ol>");
		for (int i = 0; i < books.length; i++)
		{
			out.println("<li>" + books[i] + "</li>");
		}
		out.println("</ol>");
	}
}

使用getScript方法

getScript.html页面中使用jQuery.getScript()方法发送请求,让服务器直接生成JavaScript脚本作为响应,从而通过服务器的JavaScript脚本响应直接操作当前页面。getScript.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用jQuery的getScript方法</title>
</head>
<body>
	<ul style="display: none">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<input id="get" type="button" value="getScript" />
	<div id="show"></div>
	<script src="jquery-3.1.1.js" type="text/javascript"></script>
	<script type="text/javascript">
		// 为id为get的按钮绑定事件处理函数
		$("#get").click(function() {
			$.getScript("script.jsp");
		});
	</script>
</body>
</html>

程序中使用jQuery.getScript()方法向script.jsp发送发送异步GET请求,虽然没有指定请求参数,也没有指定回调函数,但是这没有关系,script.jsp页面将直接生成JavaScript脚本作为响应,这些JavaScript脚本将直接修改当前HTML页面。下面是script.jsp页面的代码。

1
2
3
4
5
6
7
8
9
10
11
12
<%@ page contentType="text/javascript; charset=utf-8" language="java" %>
$("ul>li").each(function(index)
{
	if(index % 2 == 0)
	{
		$(this).css("background-color" , "#ccffcc");
	}
	$(this).empty();
	$(this).append("服务器响应" + index);
});
// 缓慢增加高度显示
$("ul").slideDown(1000);

该JSP页面不再输出HTML标签,它包含的全部是JavaScript代码,这些JavaScript代码将作为响应传给客户端浏览器,并由客户端浏览器来解释执行。

发送POST请求

jQuery也提供了一个发送POST 请求的方法,该方法与前面的jQuery.get()方法并无太大的区别,甚至连参数、选项都完全相同,只是该方法发送的是异步的POST请求。关于该方法的详细说明如下。

方法 描述
jQuery.post(url,[data],[callback],[type]) 向url发送异步的POST请求。

该方法中的各参数与jQuery.get()方法中各参数的功能和意义完全相同。因为jQuery.get()和jQuery.post()两个方法的用法、功能基本一样,它们的区别只是发送GET请求和POST请求的区别,故此处不再给出jQuery.post()的程序示例。

什么使用用get方法什么时候用post方法

如果用户需要发送请求的请求参数量不是太大,通常使用jQuery.get()方法即可;
如果需要发送的请求参数量较大,则建议使用jQuery.post()方法发送请求。

原文链接: 3.8.4 使用get或post方法