$.ajax()函数的语法

相比于$.get()和$.post()函数,jQuery 中提供的$.ajax()函数,是一个功能比较综合的函数,它允许我们对Aiax 请求讲行更详细的配置

基本语法:

 

 使用$.ajax()发起GET请求

使用$.ajax()发起GET请求时,只需要将type属性的值设置为'GET’即可

示例代码:

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/lib/jquery-3.6.0.js"></script>
</head>

<body>
    <button id="btnGET">发起GET请求</button>
</body>
<script>
    $(function () {
        $('#btnGET').on('click', function () {
            $.ajax({
                type: 'GET', // 说明要发起GET请求(大小写不限) 
                url: 'http://www.liulongbin.top:3006/api/getbooks', //地址
                data: {
                    id: 1
                },
                // 指定成功的回调函数
                success: function (res) {
                    console.log(res);
                }
            })
        })
    })
</script>

</html>
复制代码

 

 

使用Ajax发起Post请求:

使用$.ajax()发起 POST请求时,只需要将type属性的值设置为·POST’即可:

示例代码:

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/lib/jquery-3.6.0.js"></script>
</head>

<body>
    <button id="btnPOST">发起POST请求</button>
</body>
<script>
    $(function () {
        $('#btnPOST').on('click', function () {
            $.ajax({
                type: 'POST', // 说明要发起POST请求(大小写不限) 
                url: 'http://www.liulongbin.top:3006/api/addbook', //地址
                data: {
                    bookname: '水浒传',
                    author: '施耐庵',
                    publisher: '上海图书出版社'
                },
                // 指定成功的回调函数
                success: function (res) {
                    console.log(res);
                }
            })
        })
    })
</script>

</html>
复制代码

 

posted @   今天穿秋裤了吗  阅读(119)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示