【Java 进阶篇】Ajax 实现——JQuery 实现方式 `ajax()`

在这里插入图片描述

嗨,亲爱的读者们!欢迎来到这篇关于使用 jQuery 中的 ajax() 方法进行 Ajax 请求的博客。在前端开发中,jQuery 提供了简便而强大的工具,其中 ajax() 方法为我们处理异步请求提供了便捷的解决方案。无需手动创建 XMLHttpRequest 对象,只需几行代码,就能完成数据的发送和接收。在这篇文章中,我们将深入探讨 ajax() 方法的使用,同时为你呈现丰富的实例。

什么是 Ajax?

在开始讲解 jQuery 的 ajax() 方法之前,让我们先回顾一下 Ajax 的基础知识。Ajax,即 Asynchronous JavaScript and XML,是一种用于创建异步请求的技术。通过 Ajax,我们能够在不刷新整个页面的情况下,与服务器进行数据交互,从而提高用户体验。

jQuery 的 ajax() 方法

jQuery 的 ajax() 方法是一个多功能、强大的工具,用于发起 Ajax 请求。它具有简单易用的接口,允许我们在不同的场景中进行各种异步操作。接下来,让我们通过一系列实例,深入了解这个方法的各种用法。

基本用法

首先,我们来看一个最基本的例子。假设我们要向服务器请求一段文本数据:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery ajax() 方法基本用法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 () {
                // 使用 ajax() 方法发起 GET 请求
                $.ajax({
                    url: "https://jsonplaceholder.typicode.com/posts/1",
                    method: "GET",
                    success: function (data) {
                        // 请求成功时的处理
                        $("#dataContainer").text(data.title);
                    },
                    error: function (xhr, status, error) {
                        // 请求失败时的处理
                        console.error("请求失败:", status, error);
                    }
                });
            });
        });
    script>
body>
html>

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

发送 POST 请求

ajax() 方法不仅支持 GET 请求,还可以发送其他类型的请求,比如 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 ajax() 方法发送 POST 请求title>
    
    <script src="https://code.jquery.com/jquery-3.6.4.min.js">script>
head>
<body>

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

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

                // 使用 ajax() 方法发起 POST 请求
                $.ajax({
                    url: "https://jsonplaceholder.typicode.com/posts",
                    method: "POST",
                    data: JSON.stringify(dataToSend),
                    contentType: "application/json", // 设置请求头
                    success: function () {
                        // 请求成功时的处理
                        console.log("数据发送成功!");
                    },
                    error: function (xhr, status, error) {
                        // 请求失败时的处理
                        console.error("数据发送失败:", status, error);
                    }
                });
            });
        });
    script>
body>
html>

在这个例子中,我们定义了一个 JavaScript 对象 dataToSend,并使用 ajax() 方法发送了一个 POST 请求。我们通过 data 选项将数据对象转换为 JSON 字符串,并设置了 contentType"application/json",确保服务器正确解析请求体。

处理 JSONP 请求

有时候,由于同源策略,我们无法直接发送跨域请求。这时,我们可以使用 JSONP(JSON with Padding)来绕过这个限制。以下是一个使用 JSONP 的例子:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery ajax() 方法处理 JSONP 请求title>
    
    <script src="https://code.jquery.com/jquery-3.6.4.min.js">script>
head>
<body>

    <button id="getJsonpDataButton">获取 JSONP 数据button>
    <div id="jsonpDataContainer">div>

    <script>
        // 等待文档加载完成
        $(document).ready(function () {
            // 监听按钮点击事件
            $("#getJsonpDataButton").click(function () {
                // 使用 ajax() 方法发起 JSONP 请求
                $.ajax({
                    url: "https://api.themoviedb.org/3/movie/550",
                    method: "GET",
                    dataType: "jsonp", // 指定数据类型为 JSONP
                    data: {
                        api_key: "YOUR_API_KEY"
                    },
                    success: function (data) {
                        // 请求成功时的处理
                        $("#jsonpDataContainer").text(data.title);
                    },
                    error: function (xhr, status, error) {
                        // 请求失败时的处理
                        console.error("请求失败:", status, error);
                    }
                });
            });
        });
    script>
body>
html>

在这个例子中,我们通过设置 dataType: "jsonp" 来告诉 jQuery 发起一个 JSONP 请求。这允许我们跨域获取数据。需要注意的是,JSONP 请求不支持 POST 方法,仅支持 GET 方法。

Ajax 事件

ajax() 方法还提供了一系列的事件,使我们能够在请求的不同阶段执行自定义的操作。以下是一些常用的 Ajax 事件:

  • beforeSend:在发送请求之前执行的函数。
  • success:在请求成功完成时执行的函数。
  • error:在请求失败时执行的函数。
  • complete:在请求完成时(不论成功或失败)执行的函数。

下面是一个使用 beforeSendcomplete 事件的例子:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery ajax() 方法的事件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 () {
                // 使用 ajax() 方法发起 GET 请求
                $.ajax({
                    url: "https://jsonplaceholder.typicode.com/posts/1",
                    method: "GET",
                    beforeSend: function () {
                        // 请求发送前的操作
                        console.log("请求即将发送...");
                    },
                    success: function (data) {
                        // 请求成功时的处理
                        $("#dataContainer").text(data.title);
                    },
                    error: function (xhr, status, error) {
                        // 请求失败时的处理
                        console.error("请求失败:", status, error);
                    },
                    complete: function () {
                        // 请求完成时的操作
                        console.log("请求已完成。");
                    }
                });
            });
        });
    script>
body>
html>

在这个例子中,我们使用了 beforeSendcomplete 事件来执行在请求开始和结束时的操作。这些事件可以为我们提供更灵活的控制,以满足特定的需求。

全局设置

如果你希望为所有的 Ajax 请求设置一些默认的配置,可以使用 $.ajaxSetup() 方法。这个方法接受一个对象,其中包含了默认的设置。这些设置将应用于所有使用 ajax() 方法的请求。以下是一个示例:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery ajaxSetup() 方法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>
        // 设置全局默认配置
        $.ajaxSetup({
            beforeSend: function () {
                console.log("全局设置:请求即将发送...");
            },
            complete: function () {
                console.log("全局设置:请求已完成。");
            }
        });

        // 等待文档加载完成
        $(document).ready(function () {
            // 监听按钮点击事件
            $("#getDataButton").click(function () {
                // 使用 ajax() 方法发起 GET 请求
                $.ajax({
                    url: "https://jsonplaceholder.typicode.com/posts/1",
                    method: "GET",
                    success: function (data) {
                        // 请求成功时的处理
                        $("#dataContainer").text(data.title);
                    },
                    error: function (xhr, status, error) {
                        // 请求失败时的处理
                        console.error("请求失败:", status, error);
                    }
                });
            });
        });
    script>
body>
html>

在这个例子中,我们使用 $.ajaxSetup() 方法设置了 beforeSendcomplete 事件的默认行为。这样,所有使用 ajax() 方法的请求都会继承这些全局设置。

结语

通过本文的介绍,你应该对 jQuery 中的 ajax() 方法有了更深入的了解。这个方法提供了许多选项和事件,使我们能够轻松地处理各种异步请求的场景。同时,全局设置的使用能够进一步简化代码,提高可维护性。希望这篇博客能够帮助你更加熟练地使用 jQuery 进行前端开发,愿你的代码更加优雅、高效!

作者信息

作者 : 繁依Fanyi
CSDN: https://techfanyi.blog.csdn.net
掘金:https://juejin.cn/user/4154386571867191

你可能感兴趣的:(Java,进击高手之路,java,ajax,jquery,开发语言,okhttp,python,windows)