JSON工具类的构建(前端版本)

前言

在前后端交互的选择上，之前一直采用的是模板引擎(因为我只负责后端)。
而这次的一个算是作业吧，前后端都是我，所以就研究了一下JSON交互在java web的应用(主要是前端)。

优缺点

因为我是先写后端版本的，所以优缺点部分请跳转至JSON工具类的构建(后端版本)查看。

对比

因为我对js也是几天速成系列，所以框架型的jq以及ajax也是处于概念上的理解以及皮毛型的应用。
我所认识的主流的前端处理的ajax，所以就选用了ajax进行发送/接收解析json的处理。

需求拆分

因为没有打算深入学习前端，所以对需求的划分以及功能实现只限于满足这次的作业。
而我定义的功能/需求主要有两个

• 外部函数只需进行传入接口url以及数据，接收并初步解析结果
• 必须能进行get/post请求的发送以及接收
• 只需要发送单实体数据

格式设计

因为是请求型报文，所以只需要形成普通的json格式

{
    "name": "name",
    "password":"password",
    "account":"account"
}

代码设计

因为我希望传入接口url以及数据既能完成数据的发送与接收，而个人觉得ajax的请求响应参数中不同的只是url以及发送/接收数据不同了（限本次的需要），所以就在内部构建了一个通用的ajax的函数。

实际代码

function transfer(url, data){
    var result=new Array();
    $.ajax({
        type:"POST",
        url:url,
        dataType:"json",
        async:false,
        contentType:"application/json;charset=utf-8",
        data:JSON.stringify(data),
        success:function (dataReturn) {
            var temp=JSON.stringify(dataReturn);
            var dataObj = JSON.parse(temp);
            result[0]=dataObj.status;
            result[1]=dataObj.object;
        }
    });
    return result;
}

代码思路

1. 外部函数传入url以及数据data，data为对象类型的数据
2. 构建ajax请求发送数据
3. 因返回的json报文主要有两项：状态status以及数据object，所以采用数组型的返回结果
4. 通过JSON.stringify以及JSON.parse将返回的json字符串转换成对象
5. 根据键值拆分返回结果到3中定义的数组返回
6. 调用函数通过result[0]判断获取操作结果，result[1]获取操作的详细数据

结果展示

function clickLogin() {
    var userName=$("#userName").val();
    var password=$("#password").val();
    var data={};
    data['number']=userName;
    data['password']=password;
    var result=transfer("/text_project/login",data);
    if(result[0]=='200'){
        window.location.href="/text_project/main";
    }
    else{
        console.log("error");
    }
}

不足之处

1. get请求的需求没有解决，曾经花了7个小时去研究解决，但是因为对js以及ajax不熟悉，知道问题所在，但是没有解决
2. 不同结果的处理没有过多的处理
3. 原本想构建一个统一的网络访问函数，但是由于get请求的未解决这个想法失败了

后记

因为这次时间赶，所以只是几天速成系列，只追求能用。
但是通过这次的速成，也学习到了怎么去快速掌握或满足自身需要的一些方法，也算是接触到不同方面，能在以后的JAVA后端的学习中有所对比借鉴吧。

相关链接

这是我在前台发送/接收解析json的一点经验，我另外写了一篇文章：JSON工具类的构建(后端版本)，配合使用会很香哦~

本文首发于cartoon的博客
转载请注明出处:https://cartoonyu.github.io/cartoon-blog/post/json/json工具类的构建前端版本/