jQuery封装ajax的常用方法

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>

 

注意:

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

 

 

 

上一篇:DataType 枚举


下一篇:ie8对ajax的要求极为严格