Jquery ajax方法解析返回的json数据

这一篇主要是记录作用,起因是昨天看到邮箱里有一封上周的邮件,被淹没在了一堆垃圾邮件里,哈哈。这封邮件是一家IT公司发来的面试题,最近是有在投简历找工作啦,不过一般都是电话先聊聊,然后再约上门的,直接上邮件的,我还是第一次见。

邮件的内容大概就是:我们的需求是xxxxxxx,交互接口ajax是xxxxxx,xxxx,要做单手机版页面,请完成后将文件发回到此邮箱,如果满意的话会再邮箱通知。

本来我是不想理会的,但是想想需求又不难,之前也没做过手机版的,而且现成的接口都给了,就拿来利用利用练练手。

好了,直接说回我的主题,写好页面模板,直接先跳过css,去js里写逻辑的时候,我想了想,既然是面试,肯定要考原生js的,那我就干脆一点框架都不用,结果。。问题就来了。

照例写

xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status == 200){
            return xhr.responseText;
        }
    }
}

结果进行到responseText这一步的时候懵逼了,本来我的意图是直接return 当参数的(似曾相识jQuery的套路),结果不对,我发现这个onreadystatechange只是封装的啊,而且还是自动调用这个方法的,看来return回去的想法我还是太天真了,目前看只能直接在status这个判断里面写方法了,但是又想到有3个不同的接口要调,虽然都用get,但是还是有大量重复的代码,

行吧,那还是再去封装一个供调用的方法,把url和成功执行的函数都当做参数一样传进去,于是就有了它,其实就是仿jQuery里的,不过没写兼容啥的,这是参考某位博友写的

var Ajax={
    get: function(url, fn) {
        var obj = new XMLHttpRequest();  // XMLHttpRequest对象用于在后台与服务器交换数据          
        obj.open('GET', url, true);
        obj.onreadystatechange = function() {
            if (obj.readyState == 4 && obj.status == 200 || obj.status == 304) { // readyState == 4说明请求已完成
                fn.call(this, obj.responseText);  //从服务器获得数据
            }
        };
        obj.send();
    }

到目前为止,我以为可以快快乐乐的开始调接口,写逻辑了,结果接口是没问题,成功返回后,并且我用console.log也看到一堆数据都是没问题的。

问题出在我要去操作数据的时候,res.part ( part是已说明的对象名称),结果是undefined,喔,应该是他返回的字符串,我应该转成对象的,

好的,那就用 var data = json.parse(res);

结果直接报错了,看了英文的翻译,内容大概就是 readyState里没有这个json方法,我一脸懵逼,不能用?这是什么鬼,那我还能通过什么手段呢,

但是也没有多纠结,既然这样的话,不如先换成jquery的API试试吧,毕竟在上面也花了太久时间了,不能一点效果也没有,

结果在$.ajax里,我写到下面这段的时候

success: function(res)
照常也写一个console输出来看看,恩,数据没问题,直接写刚才的 var data = data.part ,再输出data看看,

还是undefined!!!

什么情况,datatype不是能根据json自动转换对象的吗????

失效了??

奇怪,好吧,为了看看是不是失效了,再去用Object.prototype.toString(data);

这是我能想到最严格的验证方法了,结果就是String !

好吧,看来,这个面试题果然有坑,难的根本不是业务逻辑,而是处理这堆数据的方法,这也是我之前没见到过的,只能百度一下看看有没有这样的朋友了

OK,找到并解决了,原来是用eval()!这里就不复制他的说法了,直接丢出他文章的链接:http://www.cnblogs.com/fenglie/articles/5010254.html

最后我的成品段落也就变成了这样

success : function(res){
        var data=eval("("+res+")").SERVERPARTObject;
        var partArray = [];
        for(var i = 0;i<data.length;i++){
            partArray.push(data[i].SERVERPART_NAME);
        };
        var html = '<option>请选择</option>';
        for(var a = 0; a<partArray.length;a++){
            html+='<option>'+partArray[a]+'</option>'
        };
        var select = document.getElementById('serverPart');
        select.innerHTML = html;
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值