jQuery用于请求服务器的函数

端碗吹水

发布于 2020-09-23 12:17:51

4.3K0

发布于 2020-09-23 12:17:51

文章被收录于专栏：程序猿的大杂烩程序猿的大杂烩

post方法

jQuery为我们包装简化了常用的请求方法，其中有一个post方法，此方法可以通过 HTTP POST 请求从服务器载入数据。 语法：

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType);

该方法实际上是简写的 Ajax 方法，等价于：

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

以下使用一个简单的示例演示一下post方法的使用： 服务端代码：

import org.json.JSONObject;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import java.util.HashMap;

@WebServlet("/login")
public class LoginServlet extends HttpServlet {

    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        // 声明返回的数据类型为json格式
        resp.setContentType("application/json;charset=utf-8");
        PrintWriter printWriter = resp.getWriter();
        String date = new Date().toLocaleString();

        if (username == null || password == null || password.trim().equals("") || username.trim().equals("")) {
            System.out.println("账户或密码为空！" + date);
            resp.sendError(500);
            return;
        }

        HashMap<String, String> hashMap = new HashMap();

        if (username.equals("lisi") && password.equals("123456a")) {
            System.out.println("登录成功！" + date);
            hashMap.put("response", "success!");
        } else {
            System.out.println("用户名或密码不正确！" + date);
            hashMap.put("response", "username or password error!");
        }

        printWriter.write(new JSONObject(hashMap).toString());
        printWriter.close();

    }
}

客户端代码： html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/post-jq.js"></script>
<body>
    <form onsubmit="post_request();return false;" method="post" >
        <input type="text" required placeholder="用户名" name="username" /><br>
        <input type="password" required placeholder="密码" name="password" /><br>
        <button type="submit" >登录</button>
    </form>
</body>
</html>

js代码：

function post_request() {
    // 第二个参数是json格式的
    $.post("login", {
        "username": $("input[name='username']").val(),
        "password": $("input[name='password']").val()
    }, function (data, state) {
        // 根据服务端返回的json格式得值，所以需要data.response
        alert("data: " + data.response);
        alert("state: " + state)
    });
}

运行结果：

虽然以上实验已经可以成功的请求服务器并且载入了服务器返回的数据，但是将表单信息转换成json格式的那一段代码还是复杂了一些，每个表单组件的数据都得单独的去获得，如果表单中有十来个组件的话，岂不得写十来句代码去逐个获得。所以这时候就得用到一个可以将表单数据序列化成json格式的神器：jquery.serializeJSON，这是一个基于jQuery的开源插件，以下是该插件的下载地址：

http://www.bootcdn.cn/jquery.serializeJSON/

使用该插件后，一句代码就可以解决表单数据序列化成json格式的问题，修改后的代码：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 要在jQuery之后导入该插件 -->
<script src="js/jquery.serializejson.min.js"></script>
<script src="js/post-jq.js"></script>
<body>
    <form onsubmit="post_request(this);return false;" method="post" >
        <input type="text" required placeholder="用户名" name="username" /><br>
        <input type="password" required placeholder="密码" name="password" /><br>
        <button type="submit" >登录</button>
    </form>
</body>
</html>

js代码：

function post_request(formObj) {
    // 只需要提供表单对象，就可以序列化该表单中的数据为json格式
    $.post("login", $(formObj).serializeJSON(), function (data, state) {
        alert("data: " + data.response);
        alert("state: " + state)
    });
}

服务端代码依旧不变，运行结果：

get方法

get和post在使用上基本上是一样的，这是一个简单的 GET 请求功能以取代复杂 \.ajax 。请求成功时可调用回调函数。如果想要在出错时执行函数，则需要使用 .ajax。语法：

$(selector).get(url,data,success(response,status,xhr),dataType)

同样的该函数也是简写的 Ajax 函数，等价于：

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

示例：服务端代码只需要把doPost改为doGet即可。 html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.serializejson.min.js"></script>
<script src="js/post-jq.js"></script>
<body>
    <form onsubmit="get_request(this);return false;" method="get" >
        <input type="text" required placeholder="用户名" name="username" /><br>
        <input type="password" required placeholder="密码" name="password" /><br>
        <button type="submit" >登录</button>
    </form>
</body>
</html>

js代码：

function get_request(formObj) {
    $.get("login", $(formObj).serializeJSON(), function (data, state) {
        alert("data: " + data.response);
        alert("state: " + state)
    });
}

运行结果：

思维导图：

AJAX方法

ajax方法是 jQuery 底层的 AJAX 实现，而以上介绍的get和post方法则是ajax方法的简写，ajax方法会返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。最简单的情况下，ajax() 可以不带任何参数直接使用。提示：所有的选项都可以通过 $.ajaxSetup() 函数来进行全局设置。

语法：

jQuery.ajax({settings...})

下面的表格中列出了可能的键/值：

示例，服务端代码不变： html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.serializejson.min.js"></script>
<script src="js/post-jq.js"></script>
<body>
    <form onsubmit="get_request(this);return false;" method="get" >
        <input type="text" required placeholder="用户名" name="username" /><br>
        <input type="password" required placeholder="密码" name="password" /><br>
        <button type="submit" >登录</button>
    </form>
</body>
</html>

js代码：

function ajax_request(formObj) {
    $.ajax({
        type: "post",  // 指定请求方式
        url: "login",
        async: true,  // 开启异步
        data: $(formObj).serializeJSON(),
        success: function (result, state) {  // 回调函数
            alert("result: " + result);
            alert("state: " + state);
        },
        dataType: "json" 
    });
}

运行结果：

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018-01-07 ，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery