前端使用$.ajax发起网络请求

窗台的花花

于 2023-04-12 15:38:55 发布

阅读量251

点赞数

分类专栏： web前端文章标签： ajax 前端

本文链接：https://blog.youkuaiyun.com/qq_40116418/article/details/130108145

版权

web前端专栏收录该内容

12 篇文章

订阅专栏

该文演示了如何在网页中使用jQuery进行AJAX操作，包括发起不带参数和带参数的GET请求，以及POST提交数据。通过示例代码展示了$.get、$.post和$.ajax方法的用法，这些方法用于与服务器端的API进行数据交互，如获取图书列表和添加新图书。

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

jQuery的下载

Download jQuery | jQuery

以前直接点击就可以下载jquery.js，现在点击后无法下载了，只能进行jquery文件的查看，这时候就需要自己创建一个.js后缀的文本，点击下载链接复制内容到创建的文本中，然后保存进行使用。

ajax的使用

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
</head>

<body>
    <button id="btn_get">发起不带参数的GET请求</button>
    <script>
        $(function () {
            $('#btn_get').on('click', function () { 
                $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
                    console.log(res)
                    //{"status":200,"msg":"获取图书列表成功","data":[{"id":1,"bookname":"西游记","author":"吴承恩",
                    // "publisher":"北京图书出版社"},{"id":2,"bookname":"红楼梦","author":"曹雪芹","publisher":"上海图书出版社"},
                    //{"id":3,"bookname":"三国演义","author":"罗贯中","publisher":"北京图书出版社"},{"id":111,"bookname":"背影",
                    //"author":"朱自清","publisher":"中国文化出版社"}]}
                })
            })
        })
    </script>
</body>
</html>

使用GET发起不带参数的请求

<body>
    <button id="btn_get">发起不带参数的GET请求</button>
    <script>
        $(function () {
            $('#btn_get').on('click', function () { 
                $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
                    console.log(res)
                    //{"status":200,"msg":"获取图书列表成功","data":[{"id":1,"bookname":"西游记","author":"吴承恩",
                    // "publisher":"北京图书出版社"},{"id":2,"bookname":"红楼梦","author":"曹雪芹","publisher":"上海图书出版社"},
                    //{"id":3,"bookname":"三国演义","author":"罗贯中","publisher":"北京图书出版社"},{"id":111,"bookname":"背影",
                    //"author":"朱自清","publisher":"中国文化出版社"}]}
                })
            })
        })
    </script>
</body>

使用GET发起带参数的请求

<body>
    <button id="btn_get">发起带参数的GET请求</button>
    <p id="p_result">这是请求的结果</p>
    <script>

        $(function () {
            $('#btn_get').on('click', function () {
                $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function (res) {
                    console.log(res)
                    var getbooksData = JSON.parse(JSON.stringify(res));
                    var data = getbooksData.data;   
                    var log = "作者：" + data[0].author + "; 作品：" + data[0].bookname + "; 出版社：" + data[0].publisher;
                    document.getElementById('p_result').innerHTML = log;
                    console.log(log)//{"status":200,"msg":"获取图书列表成功","data":[{"id":1,"bookname":"西游记","author":"吴承恩","publisher":"北京图书出版社"}]}
                })
            })
        })
    </script>
</body>

使用POST提交数据

<body>
    <button id="btn_post">发起POST请求</button>
    <script>
        $(function () {
            $('#btn_post').on('click', function () {
                console.log('点击了')
                $.post('http://www.liulongbin.top:3006/api/addbook', { bookname: '背影', author: '朱自清', publisher: '中国文化出版社' }, function (res) {
                    var data = JSON.parse(JSON.stringify(res))
                    console.log(res);//{"status":201,"msg":"添加图书成功"}
                    alert(data.msg)
                })
            })
        })
    </script>
</body>

使用$.ajax发起GET请求

<body>
    <button id="btn_get">发起GET请求</button>
    <script>
        $(function () {
            $('#btn_get').on('click', function () {
                $.ajax({
                    type: 'GET',
                    url: 'http://www.liulongbin.top:3006/api/getbooks',
                    data: {
                        id: 1
                    },
                    success: function (res) {
                        console.log(res)//{"status":200,"msg":"获取图书列表成功","data":[{"id":1,"bookname":"西游记","author":"吴承恩","publisher":"北京图书出版社"}]}
                    }
                })
            })
        })
    </script>
</body>

使用$.ajax发起POST请求

<body>
    <button id="btn_post">发起GET请求</button>
    <script>
        $(function () {
            $('#btn_post').on('click', function () {
                $.ajax({
                    type: 'POST',
                    url: 'http://www.liulongbin.top:3006/api/addbook',
                    data: { 
                        bookname: '前面就是麦季',
                        author:'李骏虎',
                        publisher:'黄河出版社'
                    },
                    success: function (res) {
                        console.log(res)//{"status":201,"msg":"添加图书成功"}
                    }
                })
            })
        })
    </script>
</body>