jQuery封装ajax的常用方法

Posted 2021-02-20 小木不是木

jQuery封装ajax常用的三种方式：

　　1. $.get({}):  有四个参数，写成对象形式

Url : 地址 （必须写），

data : 携带的参数  也是对象形式 ，

dataType ： 期望的数据类型，如果是json，会把后端返回的json串自动解析

Success ： function（）{}请求成功时执行的函数

<script>
        $(‘button‘).click(function(){
            $.get({
                // 对 url 地址的php文件发起请求
                url : ‘./get.php‘,
                // 请求时携带参数,参数以对象形式定义
                data : {name:‘张三‘ , pwd:123456},

                // 没有设定 dataType 参数,res中的响应体
                // 后端给什么,res中,就存储什么
                // 设定  dataType : ‘json‘, 会自动解析响应体json串
                dataType : ‘json‘,

                // 请求成功时,执行的函数
                // 函数的参数,存储响应体
                // 自定义形参 res 中 存储的就是响应体
                success : function(res){
                    console.log(res)
                }
            })
        })
    </script>

 

　　2. $.post()　

　　　　与get方式参数一样

 

<script>
        $(‘button‘).click(function(){
            $.post({
                // 对 url 地址的PHP文件发起请求
                url : ‘./post.php‘,
                // 请求时携带参数,参数以对象形式定义
                data : {name:‘张三‘ , pwd:123456},

                // 没有设定 dataType 参数,res中的响应体
                // 设定  dataType : ‘json‘, 会自动解析响应体json串
                dataType : ‘json‘,

                // 请求成功时,执行的函数
                success : function(res){
                    console.log(res)
                }
            })
        })
    </script>

 

　　注意：

　　　　这里的所有数据，后端都会给你，你根据后端给的内容然后去写代码

　　3. $.ajax({}) 　　这个是综合的，有很多很多参数，他可以发送任何请求

url : 地址 ，

data ： 携带的参数  对象形式

dataType ： 期望数据类型，一般写一个json就可以，设定为json，会自动解析反应提中的json串

 

Jsonp ： 定义函数名称，如果不写系统默认就是callback

Success ： function（）{}请求成功执行的函数

Type/method ：这里写请求的方式，后端要求什么请求方式你就些什么

不太常用的参数：

async ： 设定是否异步

error ： function（）{}请求错误的时候执行的函数

Timeout ： 设定时间，单位毫秒，超出时间认为请求失败，只有在异步的时候才会成功

Cache ： 设定是否川村请求结果，默认是true，必须是get方式才请作用

Context ： 指定执行函数中的this指向

<script>
        $.ajax({
                url : ‘‘,//你需要的地址
                type : ‘get‘,//后端要求的方式
                data : {name:‘张三‘,pwd:123456},//传给后端的数据
                dataType : ‘json‘,//解析json字符串
                success : function(res){
                    console.log(res);
                }
            })

</script>

特别内容：

$.ajax({})，还可以发送一个jsonp的请求

<script>

            // jsonp方式
            // 在执行跨域时
            //    1, 必须要设定 dataType 为 jsonp,才能完成跨域
            //    2, 我们手写 jsonp 方式,要先定义一个函数
            //       先jQuery给我们准备好了,一个函数,默认的名称是 callback
            //       可以通过 jsonp 属性 来定义 这个函数的名称 
            //       这里影响的是PHP的操作，php根据这个定义的函数来调用函数

        $.ajax({
                url : ‘‘,//直接写跨域的地址就可以
                type : ‘get‘,
                data : {name:‘张三‘,pwd:123456},
                dataType : ‘jsonp‘,  // jsonp 跨域请求专门的参数，这里必须设置成jsonp
                jsonp : ‘fun‘,       // 定义函数名称为 fun , 不写默认名称是 callback
                success : function(res){
                    console.log(res);
                }
            })
</script>

 

注意：

　　具体的参数内容要根据项目为准，后端给什么，我们用什么。（疫情逆战）