总要有人来改变世界的,为什么不能是你呢

关于iframe和div窗口中ajax请求200状态时执行的回调问题

上一篇说了在ajax回调里面处理iframe窗口的刷新问题,这一篇记录一下遇到的一个分别在iframe和div窗口中ajax请求200状态时执行的回调问题。

我们先来看一下ajax请求的写法(这里使用了jQuery)

function check_pass(uid) {
    $.ajax({
        type: "GET",
        url: siteurl,
        dataType: "json",
        data:{
            "c":"api",
            "m":"checkpass",
            "uid":uid
            },
        success: function(data) {
            console.log("这里是success回调");
            console.log(data);
        },
          error:function (XMLHttpRequest, textStatus, errorThrown) {
            console.log("这是error回调");
            // 状态码
            console.log(XMLHttpRequest.status);
            // 错误信息 
            console.log(errorThrown);
        }
    });
}

 

在我们大多数人看来,ajax请求返回"200 ok" 状态码,此时表示请求成功,执行success方法,那我们就做个试验:

首先我们注意看,这个ajax请求规定dataType为json,那么我们在接口里返回不同类型的数据来测试iframe和div的返回结果;

1.接口返回json数据

public function checkpass() {
        $uid = $this->input->get('uid');
        $data = array('checkcode' => 1,
                      'reason' =>null
                      );
        $this->db->where('uid', $uid);
        $this->db->update('mt_member_data', $data);
        $msg = array('msg'=>'审核通过','code'=>'1');
        echo json_encode($msg);
        exit;
    }

在iframe窗口执行ajax请求控制台打印(Network显示状态200ok):

这是success回调
{msg: "审核通过", code: "1"}

在模态窗口div执行ajax请求控制台打印(Network显示状态200ok):

这是success回调
{msg: "审核通过", code: "1"}

结论:当接口返回数据类型为json时(符合ajax设定),iframe和div中的ajax都会走success回调。

2.接口返回null

public function checkpass() {
        $uid = $this->input->get('uid');
        $data = array('checkcode' => 1,
                      'reason' =>null
                      );
        $this->db->where('uid', $uid);
        $this->db->update('mt_member_data', $data);
    }

在iframe窗口执行ajax请求控制台打印(Network显示状态200ok):

这是error回调
200
SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at m.parseJSON (jquery.min.js:5)
    at Pb (jquery.min.js:5)
    at x (jquery.min.js:5)
    at XMLHttpRequest.b (jquery.min.js:5)

在模态窗口div执行ajax请求控制台打印(Network显示状态200ok):

这是success回调
null

结论:当接口返回数据类型为null时(不符合ajax设定),iframe中的ajax走error回调,模态窗口div中的ajax却是走success回调。

3.接口返回非json数据

public function checkpass() {
        $uid = $this->input->get('uid');
        $data = array('checkcode' => 1,
                      'reason' =>null
                      );
        $this->db->where('uid', $uid);
        $this->db->update('mt_member_data', $data);
        echo "非json数据";
        exit;
    }

在iframe窗口执行ajax请求控制台打印(Network显示状态200ok):

这是error回调
200
SyntaxError: Unexpected token 非 in JSON at position 0
    at JSON.parse (<anonymous>)
    at m.parseJSON (jquery.min.js:5)
    at Pb (jquery.min.js:5)
    at x (jquery.min.js:5)
    at XMLHttpRequest.b (jquery.min.js:5)

在模态窗口div执行ajax请求控制台打印(Network显示状态200ok):

这是error回调
200
SyntaxError: Unexpected token 非 in JSON at position 0
    at JSON.parse (<anonymous>)
    at parseJSON (VM1506 jquery.min.js:2)
    at On (VM1506 jquery.min.js:2)
    at T (VM1506 jquery.min.js:2)
    at XMLHttpRequest.r (VM1506 jquery.min.js:2)

结论:当接口返回数据类型为非json数据时(不符合ajax设定),iframe和模态窗口div中的ajax都是走error回调,并且报数据格式不对的错误。

 

所以,我们可以看出,当接口不返回数据(即为null)时,对于iframe和div中发起的ajax请求,请求成功后执行的回调函数是不同的,这点值得注意。

 

 

 

 

 

 

 

 

 

 




posted @ 2018-05-27 01:08  桔子桑  阅读(682)  评论(0编辑  收藏  举报