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工具類的構建前端版本/