一、Ajax

  • Ajax的全称是 Asynchronous Javascript And XML(异步Javascript和XML)。
  • 通俗理解：在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式，就是Ajax。
  • ajax通信的过程不会影响后续javascript的执行，从而实现异步。

二、jQuery中的Ajax

浏览器中的XMLHttpRequest用法比较复杂，所以jQuery对XMLHttpRequest进行了封装，提供了一系列Ajax相关的函数，极大地降低了Ajax的使用难度

  • jQuery中发起Ajax请求常用的三个方法如下：

    • $.get()
    • $.post()
    • $.ajax()

  • $.get()函数

    • 专门用来发起get请求
    • 语法 
      $.get(url, [data], [callback])

    • 三个参数含义：
      • url
        • 要请求的资源地址
        • string类型
        • 必选
      • data
        • 请求资源要携带的参数
        • object类型
        • 可选
      • callback
        • 请求成功时的回调函数
        • function类型
        • 可选
    • 示例 
      <!DOCTYPE html>
<html lang="zh">
<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>Ajax</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<button id="btn">点我一下</button>

    <script>
        $('#btn').on('click',function (){
            $.get('http://www.liulongbin.top:3006/api/getbooks',{id: 1},function (res) {
                console.log(res)
            })
        })
    </script>

</body>
</html>

  • $.post()函数

    • 专门用来发起post请求
    • 语法 
      $.post(url, [data], [callback])

    • 三个参数的含义：
      • url
        • 提交数据的地址
        • string类型
        • 必选
      • data
        • 要提交的数据
        • object类型
        • 可选
      • callback
        • 数据提交成功时的回调函数
        • function类型
        • 可选
    • 示例 
      <!DOCTYPE html>
<html lang="zh">
<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>Ajax</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<button id="btn">点我一下</button>

    <script>
        $('#btn').on('click',function (){
            $.post(
                'http://www.liulongbin.top:3006/api/addbook', // 请求的url
                {bookname: '骆驼祥子', author: '老舍', publisher: '上海图书出版社'}, // 提交的数据
                function (res) { // 回调函数
                    console.log(res)
                }
            )
        })
    </script>

</body>
</html>

  • $.ajax()函数

    • 相比于$.get()和$.post()函数，$.ajax()是一个功能比较综合的函数，它允许我们对Ajax请求进行更详细的配置。
    • 语法 
      $.ajax({
    type: '' ,  // 请求的方式，例如GET 或 POST（大写小写均可以）
    url: '',  // 请求的url地址
    data: {},  // 这次请求要携带的数据，可选
    success: function(res) {} // 请求成功后的回调函数
})

      参数是一个配置对象

    • 示例

      <!DOCTYPE html>
<html lang="zh">
<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>Ajax</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<button id="btn">点我一下</button>

    <script>
        $('#btn').on('click',function (){
            /*
            发送get请求
            $.ajax(
                {
                    type: 'GET',
                    url: 'http://www.liulongbin.top:3006/api/getbooks',
                    data: {id: 1},
                    success: res => console.log(res)
                }
            )
            */

            // 发送post请求
            $.ajax({
                type: 'POST',
                url: 'http://www.liulongbin.top:3006/api/addbook',
                data: {
                    bookname: '骆驼祥子',
                    author: '老舍',
                    publisher: '上海图书出版社'
                },
                success: res => console.log(res)
            })
        })
    </script>

</body>
</html>

       

 

原文地址：http://www.cnblogs.com/eliwang/p/16825057.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性