jQuery 中的 Ajax

最新推荐文章于 2023-11-27 14:21:14 发布

火星飞鸟

最新推荐文章于 2023-11-27 14:21:14 发布

阅读量185

点赞数 1

分类专栏：前后端交互 jQuery Ajax 文章标签：前端 ajax jquery

本文链接：https://blog.youkuaiyun.com/Jack_lzx/article/details/109998757

版权

前后端交互同时被 3 个专栏收录

31 篇文章

订阅专栏

jQuery

8 篇文章

订阅专栏

Ajax

8 篇文章

订阅专栏

本文介绍了 jQuery 中 AJAX 的基本使用方法，包括 $.ajax() 方法的基本配置和使用、serialize() 方法的功能及应用、$.get() 和 $.post() 方法的区别与用法，以及如何利用 $.ajax() 发送 JSON 请求，并探讨了 Ajax 全局事件的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. `$.ajax()`方法基本使用

var params = {
    name: 'wangwu',
    age: 300
}
$('#btn').on('click', function() {
    $.ajax({
        // 请求方式
        type: 'post',
        // 请求地址
        url: '/user',
        // 向服务器端发送的请求参数
        // name=zhangsan&age=100
        // data: {
        //     name: 'zhangsan',
        //     age: 100
        // },
        data: JSON.stringify(params),
        // 指定参数的格式类型
        contentType: 'application/json',
        // contentType: 'application/x-www-form-urlencoded',
        beforeSend: function() {
            alert('请求不会被发送')
                // 请求不会被发送
            return false;
        },
        // 请求成功以后函数被调用
        success: function(response) {
            // response为服务器端返回的数据
            // 方法内部会自动将json字符串转换为json对象
            console.log(response);
        }
    });
});

2. `serialize()`方法

作用：将表单中的数据自动拼接成字符串类型的参数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>serialize方法说明</title>
</head>

<body>
    <form id="form">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit" value="提交">
    </form>
    <script src="./js/jquery.min.js"></script>
    <script type="text/javascript">
        $('#form').on('submit', function() {
            // 将表单内容拼接成字符串类型的参数
            var params = $('#form').serialize();
            console.log(params);
            // 阻止表单默认行为
            return false;
        });
    </script>
</body>

</html>

在这里插入图片描述

3. `$.get()`、`$.post()`方法

作用：$.get()方法用于发送get请求，$.post()方法用于发送post请求。

$.get('http://www.example.com', { name: 'zhangsan', age: 30 }, function(response) {});
$.post('http://www.example.com', { name: 'lisi', age: 22 }, function(response) {});

4. `$.ajax()`方法发送`json`请求

客户端：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>$.ajax方法基本使用</title>
</head>

<body>
    <button id="btn">发送请求</button>
    <script src="/js/jquery.min.js"></script>
    <script>
        // 自定义代替success函数的函数
        function fn(response) {
            console.log(response)
        }

        $('#btn').on('click', function() {
            $.ajax({
                url: '/jsonp',
                // 向服务器端传递函数名字的参数名称
                jsonp: 'cb',
                // 自定义代替success函数的函数，一般不使用
                jsonpCallback: 'fn',
                // 代表现在要发送的是jsonp请求
                dataType: 'jsonp',
                // success: function(response) {
                //     console.log(response)
                // }
            })
        });
    </script>
</body>

</html>

服务器端：

app.get('/jsonp', (req, res) => {
    const cb = req.query.cb;
    const data = cb + "({name: 'zhaoliu'})";
    res.send(data);
});

5. `Ajax`全局事件

只要页面中有Ajax请求被发送，对应的全局事件就会被触发

// 当页面中有ajax请求发送时触发
$(document).on('ajaxStart', function() {
    NProgress.start();
});

// 当页面中有ajax请求完成时触发
$(document).on('ajaxComplete', function() {
    NProgress.done();
});