• 【Java 进阶篇】Ajax 实现——JQuery 实现方式 `get` 与 `post`

    在这里插入图片描述

    嗨，亲爱的小白们！欢迎来到这篇关于使用 jQuery 实现 Ajax 请求的博客。在前端开发中，Ajax 是一项非常重要的技术，它使我们能够在不刷新整个页面的情况下与服务器进行数据交互。而在 jQuery 中，get 和 post 方法提供了简便的接口，让我们更加轻松地完成这一过程。在本文中，我们将深入研究这两个方法的使用，同时通过大量实例来让你更好地掌握它们。

    Ajax 简介

    Ajax，全称 Asynchronous JavaScript and XML，是一种用于创建异步请求的技术。简而言之，Ajax 允许我们在不刷新整个页面的情况下，与服务器进行数据交互。这意味着我们可以动态地更新页面内容，提高用户体验。在使用原生 JavaScript 进行 Ajax 请求时，我们需要手动创建 XMLHttpRequest 对象，而在 jQuery 中，get 和 post 方法为我们提供了更简单的选择。

    使用 get 方法发送 GET 请求

    首先，让我们来了解如何使用 jQuery 的 get 方法发送 GET 请求。这个方法具有简单的语法和易于理解的参数设置。以下是一个基本的例子：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 jQuery 的 get 方法发送 GET 请求title>
    
    <script src="https://code.jquery.com/jquery-3.6.4.min.js">script>
head>
<body>

    <button id="getDataButton">获取数据button>
    <div id="dataContainer">div>

    <script>
        // 等待文档加载完成
        $(document).ready(function () {
            // 监听按钮点击事件
            $("#getDataButton").click(function () {
                // 使用 get 方法发送 GET 请求
                $.get("https://jsonplaceholder.typicode.com/posts/1", function (data) {
                    // 请求成功时的处理
                    $("#dataContainer").text(data.title);
                })
                .fail(function (xhr, status, error) {
                    // 请求失败时的处理
                    console.error("请求失败：", status, error);
                });
            });
        });
    script>
body>
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

    在这个例子中，我们引入了 jQuery 库，并使用 get 方法发送了一个 GET 请求。当按钮被点击时，请求会发送到指定的 URL，并在请求成功时将返回的数据显示在页面上。

    get 方法的更多选项

    get 方法的语法非常简洁，但它还提供了许多可选的参数，以满足不同场景的需求。以下是一些常用的选项：

    • data：要发送到服务器的数据，可以是字符串或对象。
    • dataType：预期的服务器响应的数据类型，常用的有 "json"、"xml"、"html" 等。
    • success：请求成功时执行的回调函数。
    • error：请求失败时执行的回调函数。

    让我们通过一个例子来演示如何使用这些选项：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 jQuery 的 get 方法的更多选项title>
    
    <script src="https://code.jquery.com/jquery-3.6.4.min.js">script>
head>
<body>

    <button id="getDataButton">获取数据button>
    <div id="dataContainer">div>

    <script>
        // 等待文档加载完成
        $(document).ready(function () {
            // 监听按钮点击事件
            $("#getDataButton").click(function () {
                // 使用 get 方法发送带参数的 GET 请求
                $.get("https://jsonplaceholder.typicode.com/posts/1", { userId: 1 }, function (data) {
                    // 请求成功时的处理
                    $("#dataContainer").text(data.title);
                }, "json")
                .fail(function (xhr, status, error) {
                    // 请求失败时的处理
                    console.error("请求失败：", status, error);
                });
            });
        });
    script>
body>
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

    在这个例子中，我们通过在 URL 后面添加参数来发送带参数的 GET 请求。我们还通过 dataType 选项明确告诉 jQuery 我们期望的响应数据类型是 JSON。

    使用 post 方法发送 POST 请求

    除了 get 方法，jQuery 还提供了 post 方法用于发送 POST 请求。POST 请求通常用于提交表单数据或在请求体中包含数据。以下是一个使用 post 方法的例子：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 jQuery 的 post 方法发送 POST 请求title>
    
    <script src="https://code.jquery.com/jquery-3.6.4.min.js">script>
head>
<body>

    <button id="sendDataButton">发送数据button>
    <div id="responseContainer">div>

    <script>
        // 等待文档加载完成
        $(document).ready(function () {
            // 监听按钮点击事件
            $("#sendDataButton").click(function () {
                // 构造要发送的数据
                var postData = {
                    title: "foo",
                    body: "bar",
                    userId: 1
                };

                // 使用 post 方法发送 POST 请求
                $.post("https://jsonplaceholder.typicode.com/posts", postData, function (data) {
                    // 请求成功时的处理
                    $("#responseContainer").text("Post ID: " + data.id);
                }, "json")
                .fail(function (xhr, status, error) {
                    // 请求失败时的处理
                    console.error("请求失败：", status, error);
                });
            });
        });
    script>
body>
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

    在这个例子中，我们使用 post 方法发送了一个 POST 请求。按钮被点击时，请求会发送到指定的 URL，并在请求成功时将服务器返回的数据显示在页面上。

    post 方法的更多选项

    post 方法也支持一些与 get 方法相似的选项，让我们更好地控制请求的行为。以下是一些常用的选项：

    • data：要发送到服务器的数据，可以是字符串或对象。
    • dataType：预期的服务器响应的数据类型，常用的有 "json"、"xml"、"html" 等。
    • success：请求成功时执行的回调函数。
    • error：请求失败时执行的回调函数。

    通过一个例子，我们来演示如何使用这些选项：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 jQuery 的 post 方法的更多选项title>
    
    <script src="https://code.jquery.com/jquery-3.6.4.min.js">script>
head>
<body>

    <button id="sendDataButton">发送数据button>
    <div id="responseContainer">div>

    <script>
        // 等待文档加载完成
        $(document).ready(function () {
            // 监听按钮点击事件
            $("#sendDataButton").click(function () {
                // 构造要发送的数据
                var postData = {
                    title: "foo",
                    body: "bar",
                    userId: 1
                };

                // 使用 post 方法发送带参数的 POST 请求
                $.post("https://jsonplaceholder.typicode.com/posts", postData, function (data) {
                    // 请求成功时的处理
                    $("#responseContainer").text("Post ID: " + data.id);
                }, "json")
                .fail(function (xhr, status, error) {
                    // 请求失败时的处理
                    console.error("请求失败：", status, error);
                });
            });
        });
    script>
body>
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

    在这个例子中，我们通过在请求体中包含数据，实现了发送带参数的 POST 请求。同样，我们使用 dataType 选项明确告诉 jQuery 我们期望的响应数据类型是 JSON。

    结语

    通过本文的介绍，你应该对使用 jQuery 的 get 和 post 方法发送 Ajax 请求有了更深入的了解。这两个方法提供了简洁易懂的接口，使得前端开发者能够更轻松地进行异步数据交互。希望通过这篇博客，你能够更加自信地在自己的项目中应用这些技术，提升页面的交互性和用户体验。加油，童鞋们！

    作者信息

    作者 ： 繁依Fanyi
    CSDN： https://techfanyi.blog.csdn.net
    掘金：https://juejin.cn/user/4154386571867191
  • 相关阅读:
    轻盈百搭头戴式耳机——umelody轻律 U1头戴式复古耳机分享
    网络安全 - DNS劫持原理 + 实验
    YOLOv5、v7改进之三十五：引入S2-MLPv2注意力机制
    baidu, google和chatgpt -- 翻译对比
    学习笔记-算法-9-二叉树-1
    数据湖&湖仓一体简介
    深度学习网路模型
    基于SSM考试在线报名管理系统
    使用pytest和allure框架实现自动化测试报告优化
    【内网安全】——windows信息收集
  • 原文地址：https://blog.csdn.net/qq_21484461/article/details/134497870