Ajax 请求的三种写法

Ajax 请求简介：

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术

• ajax技术的目的：

  • 是让js发送http请求，实现与服务端通信，即数据交互

• ajax的两个主要好处：

  • 异步请求
  • 局部刷新（无刷新）

• 数据接口：

  • 数据接口是后台提供的，是一个url地址，通过访问该url，实现对服务端数据的增删改查操作，服务端一般返回的的数据以json格式封装

• 局部刷新（无刷新）：

  • ajax 可以实现 局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新；
  • ajax 可以自己发送 http 请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax 获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新

• 常用参数： 

  • url : 请求地址
  • type : 请求方式, 默认是"GET", 常用的还有POST
  • dataType : 设置返回的数据格式, 常用的是"json"格式, 还有"HTML"格式
  • data : 设置发送给服务器的数据
  • success : 设置请求成功后的回调函数( 第二种方式用done )
  • error : 设置请求失败后的回调函数, ( 第二种方式用fail )

Ajax 请求写法一：

    <script>
        $(function () {
            $.ajax({
                // 设置ajax的参数
                // 请求数据的url地址：接口地址
                url: '/index_data',  
                // 请求数据方式：get  post
                type: 'get',    
                // 返回的数据格式  json
                dataType: 'json',
                // data:发送给接口的数据
                data:{"code":"30026"},
                // 请求成功之后要执行的回调函数
                success: function (dat) {
                    //dat:服务端返回的数据
                    console.log(dat)
                },
                // 请求失败
                error: function (e) {
                    alert('请求失败')
                }
            })
        })
    </script>

 

Ajax 请求写法二 ( 推荐 )：

    <script>
        $(function () {
            $.ajax({
                url: '/index_data', //请求地址
                type: 'get', //请求方式
                dataType: 'json', //返回的数据格式
                data:{'code':"000007"}
            }).done(function(dat) {
                // 请求成功之后要执行的回调函数
                console.log(dat)
            }).fail(function(e) {
                // 请求失败之后要执行的回调函数
                alert('请求失败')
            })
        })
    </script>

 

Ajax请求写法三 ( 化简写法 )：

    <script>
        $(function () {
            $.get("/add_data", {
                "code":"000007"
            },
            function(dat){
                //请求成功时回调函数
                alert(dat)
            })
        })
    </script>