3.8.4 使用get或post方法

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

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
20
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()方法发送请求。