jQuery封装ajax的使用方法

jQuery中封装的ajax请求

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

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

 <h1>get请求</h1>
 <button>请求</button>
 <script src="../jquery.min.js"></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)
                }
            })
        })

后端PHP程序：

<?php

$name = $_GET[\'name\'];
$pwd = $_GET[\'pwd\'];

$arr = [
    \'msg\' => \'您请求的方式是get\',
    \'data\' => [
        \'name\' => $name, 
        \'pwd\' => $pwd,        
    ]
];

echo json_encode($arr);

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

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

<h1>post请求</h1>
    <button>请求</button>

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

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

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



    </script>

后端PHP程序：

<?php

$name = $_POST[\'name\'];
$pwd = $_POST[\'pwd\'];

$arr = [
    \'msg\' => \'您请求的方式是post\',
    \'data\' => [
        \'name\' => $name, 
        \'pwd\' => $pwd,        
    ]
];

echo json_encode($arr);

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

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

    <h1>ajax请求</h1>
    <button>请求</button>

    <script src="../jquery.min.js"></script>
    <script>
        const obj = {};

        $(\'button\').click(function(){
            $.ajax({
                // 对 url 地址的PHP文件发起请求
                url : \'./get.php\',

                // 请求方式,不写就是,默认值get.
                type: \'get\',

                // data传参参数
                data : {name:\'张三\',pwd:123456},

                // dataType, 设定 json 解析响应体的json串
                dataType : \'json\',

                success : function(res){
                    console.log(res);
                    console.log(this);
                },
                
                // 不常用的
                // async : false,  // 设定异步
                // 请求成功不执行,请求失败才执行
                error : function(res){
                    console.log(res)
                },
                // timeout : 1,   // 超市报错,但是必须是异步执行
                cache : false,    // 如果是不缓存,会在数据后有一个 _数值 的时间戳,告诉程序,这个结果的获取时间
                context : obj ,   // this默认指向 ajax对象 , 可以设定this的指向
            })

            console.log(\'我是同步执行的程序\');
        })
    </script>

jQuery的跨域访问

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

 $(\'button\').click(function(){
            // 代理方式跨域,高版本支持
            // 配置好代理,定义好传参方式,就可以完成代理,请求跨域
             $.ajax({
                url : \'/dt?include_fields=top_comments%2Cis_root%2Csource_link%2Citem%2Cbuyable%2Croot_id%2Cstatus%2Clike_count%2Csender%2Calbum%2Creply_count&filter_id=%E7%BE%8E%E9%A3%9F%E8%8F%9C%E8%B0%B1&start=0&_=1587714668214\',
                type : \'get\',
                data : {name:\'张三\',pwd:123456},
                dataType : \'json\',
                success : function(res){
                console.log(res);
             }
  })

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

$.ajax({
                url : \'http://localhost/nz2002/week8_day04/01_jQuery_ajax/jsonp.php\',
                type : \'get\',
                data : {name:\'张三\',pwd:123456},
                dataType : \'jsonp\',  // jsonp 跨域请求专门的参数
                jsonp : \'fun\',       // 定义函数名称为 fun , 不写默认名称是 callback
                success : function(res){
                    console.log(res);
                }
            })
        })