Ajax的三种写法

yu_zheng5163

于 2022-10-21 15:00:16 发布

阅读量1.6k

点赞数 1

文章标签： ajax javascript 前端 java

本文链接：https://blog.csdn.net/m0_56095048/article/details/127446542

版权

这篇博客介绍了Ajax在JavaScript中实现数据异步交互的三种常见方法。通过jQuery库，展示了如何设置请求地址、请求类型、数据格式以及成功和失败的回调函数。不论是GET、POST请求，还是使用done和fail进行回调，或者是简化版的$.get，都详细解释了其使用过程和参数配置。这对于前端开发者掌握数据交互至关重要。

摘要由CSDN通过智能技术生成

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

第一种写法

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

第二种写法

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

第三种写法

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