jQuery用于请求服务器的函数

发布时间:2020-05-31 21:08:59 作者:ZeroOne01
来源:网络 阅读:1349

post方法

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

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

jQuery用于请求服务器的函数

该方法实际上是简写的 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)
    });
}

运行结果:
jQuery用于请求服务器的函数
jQuery用于请求服务器的函数

虽然以上实验已经可以成功的请求服务器并且载入了服务器返回的数据,但是将表单信息转换成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)
    });
}

服务端代码依旧不变,运行结果:
jQuery用于请求服务器的函数
jQuery用于请求服务器的函数

get方法

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

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

jQuery用于请求服务器的函数

同样的该函数也是简写的 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)
    });
}

运行结果:
jQuery用于请求服务器的函数
jQuery用于请求服务器的函数

思维导图:
jQuery用于请求服务器的函数

AJAX方法

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

语法:

jQuery.ajax({settings...})

jQuery用于请求服务器的函数

下面的表格中列出了可能的键/值:
jQuery用于请求服务器的函数

示例,服务端代码不变:
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" 
    });
}

运行结果:
jQuery用于请求服务器的函数
jQuery用于请求服务器的函数

推荐阅读:
  1. C# Request请求——可用于WebService
  2. jquery如何实现Ajax请求

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

jquery post 方法

上一篇:Oracle树结构

下一篇:rdo远程桌面管理快捷键在哪里?

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》