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

670 阅读2分钟

前言

在前后端交互的选择上,之前一直采用的是模板引擎(因为我只负责后端)。 而这次的一个算是作业吧,前后端都是我,所以就研究了一下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的博客
转载请注明出处:cartoonyu.github.io/cartoon-blo…