0%

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

前言

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

优缺点

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

对比

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

需求拆分

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

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

格式设计

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

1
2
3
4
5
{
"name": "name",
"password":"password",
"account":"account"
}

代码设计

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

实际代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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]获取操作的详细数据

结果展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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工具类的构建前端版本/