jQuery 封装 ajax 的使用方法

最新推荐文章于 2023-09-26 20:42:35 发布

原创最新推荐文章于 2023-09-26 20:42:35 发布 · 272 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #js

本文深入讲解了jQuery中的三种AJAX请求方式：$.get(), $.post() 和 $.ajax()，包括各自的参数说明、使用场景及注意事项，特别强调了$.ajax()的高级用法，如代理方式和JSONP跨域请求。

jQuery中封装的 ajax请求有3种

1、$.get() get请求方式

        共有4个参数,必填参数是 url地址 其他参数都是选填参数,
        $.get({
            url : 地址(必填)
            data : 携带的参数是对象形式
            dataType : 期望的数据类型,如果为json,会将后端返回的json串,自动解析
            success : function(){} 请求成功时执行的函数
        })

2、$.post() post请求方式

        共有4个参数,必填参数是 url地址 其他参数都是选填参数，
        $.post({
            url : 地址(必填)
            data : 携带的参数是对象形式
            dataType : 期望的数据类型,如果为json,会将后端返回的json串,自动解析
            success : function(){} 请求成功时执行的函数
        })

3、$.ajax() 综合方式

参数有多个参数
常规get,post请求(不是跨域),常用参数
        
$.ajax({
       常用:
            url : 地址;
            type / method : 请求方式 默认值是get方式
            data : { } 传参参数,必须是对象形式
            dataType : json,  设定为json,会自动解析反应提中的json串
            success : function(){}  请求成功执行的函数

       不常用:
            async : 设定是否异步,默认值是true,异步执行ajax请求，实际项目中都是异步执行
            error : function(){}  请求错误时执行的函数
                    请求成功时不会执行
            timeout : 设定时间,单位 毫秒
                      如果请求时间超过设定的时间,认为是请求失败
                      必须是异步执行
            cache : 设定是否缓存请求结果
                    默认值是 true,缓存请求结果
                    必须是get方式,这个设定才起作用
                    post方式不会缓存,设定也没有效果
            context : 指定 执行函数中 this的指向
})

1, 代理方式

 必须是高版本的jQuery
 设定好 服务器代理
 定义好请求方式
 get方式参数设定在url地址中
 post方式参数设定在 data中

2, jsonp方式

 支持 jsonp方式,完成跨域请求

 封装的ajax

     url : 地址是一个跨域地址
     dataType : 必须是 jsonp
     jsonp : 设定函数名称,默认是callback

 php中: 
     echo 的内容是字符串拼接形式
     echo $函数名称变量(  json_encode($返回数据)  );
     函数名称 存储在变量中,使用 " " 双引号解析
     返回的数据,必须是 json串格式 , 使用 json_encode() 转化,拼接在 函数的参数位置中