JSON工具類的構建(前端版本)

前言

在先後端交互的選擇上,以前一直採用的是模板引擎(由於我只負責後端)。
而此次的一個算是做業吧,先後端都是我,因此就研究了一下JSON交互在java web的應用(主要是前端)。html

優缺點

由於我是先寫後端版本的,因此優缺點部分請跳轉至JSON工具類的構建(後端版本)查看。前端

對比

由於我對js也是幾天速成系列,因此框架型的jq以及ajax也是處於概念上的理解以及皮毛型的應用。
我所認識的主流的前端處理的ajax,因此就選用了ajax進行發送/接收解析json的處理。java

需求拆分

由於沒有打算深刻學習前端,因此對需求的劃分以及功能實現只限於知足此次的做業。
而我定義的功能/需求主要有兩個git

  • 外部函數只需進行傳入接口url以及數據,接收並初步解析結果
  • 必須能進行get/post請求的發送以及接收
  • 只須要發送單實體數據

格式設計

由於是請求型報文,因此只須要造成普通的json格式github

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

代碼設計

由於我但願傳入接口url以及數據既能完成數據的發送與接收,而我的以爲ajax的請求響應參數中不一樣的只是url以及發送/接收數據不一樣了(限本次的須要),因此就在內部構建了一個通用的ajax的函數。web

實際代碼

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後端的學習中有所對比借鑑吧。ajax

相關連接

這是我在前臺發送/接收解析json的一點經驗,我另外寫了一篇文章:JSON工具類的構建(後端版本),配合使用會很香哦~json

本文首發於cartoon的博客
轉載請註明出處:https://cartoonyu.github.io/cartoon-blog/post/json/json工具類的構建前端版本/後端

相關文章
相關標籤/搜索