Ajax学习

一、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>

       

 

posted @ 2022-10-25 15:53  eliwang  阅读(21)  评论(0)  编辑  收藏  举报