乐趣区

JSON工具类的构建前端版本

jiezi

前言

在前后端交互的选择上，之前一直采用的是模板引擎 (因为我只负责后端)。
而这次的一个算是作业吧，前后端都是我，所以就研究了一下 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 工具类的构建前端版本 /

退出移动版