前端json文件處理,前端如何處理json數據

本文目錄一覽：

• 1、node.js發送的json數據怎麼處理，需要返回對象
• 2、幾個有效的前端數據處理的方法
• 3、前端json數據進行base64編碼，怎麼做
• 4、前端怎麼解析json
• 5、如何將數據以json格式傳給前端

node.js發送的json數據怎麼處理，需要返回對象

前端傳給服務器的只是json 格式的字符串，使用json_decode，

mixed json_decode ( string $json [, bool $assoc ] )

var_dump(json_decode($json));

var_dump(json_decode($json, true));

如果不帶參數，則返回為對象

帶上true時，返回數組

foreach($ARR as $k=$v){

echo ‘key=’.$k.’;value=’.$v;

}

單獨處理每個key 和對應的value就好

幾個有效的前端數據處理的方法

一、JSON對象過濾數據（處理複雜數據時可以直接在內部過濾掉）

封裝方法：

function  getTargetObject(targetObject, propsArray){if(typeof(targetObject) !==”object”|| !Array.isArray(propsArray)) {thrownewError(“參數格式不正確”); }constresult = {};Object.keys(targetObject).filter(key=propsArray.includes(key)).forEach(key={ result[key] = targetObject[key]; })returnresult;}

使用方法：

let arr = {a: ‘1’, b:’2′, c: ‘3’}

getTargetObject(arr, [‘a’, ‘b’])

引用網站：

二、數組切割（當後端傳來數據過多的時候，將數據切成幾個等分，用戶下拉的時候再展示）

 * 將一個數組分成幾個同等長度的數組   * array[分割的原數組]   * size[每個子數組的長度]

 */functionsliceArray(array, size) {

    varresult = [];

    for(varx = 0; x  Math.ceil(array.length / size); x++) {

        varstart = x * size;

        varend = start + size;

        result.push(array.slice(start, end));

    }  returnresult  }

引用網站： ;word=js%CA%FD%D7%E9%C7%D0%B7%D6ie=gbk

三、數據過濾（使用JSON.stringify方法）

   數據：   persons: [

                      {apple: ‘蘋果’},

                      {watermelon: ‘西瓜’},

                      {lemon: ‘檸檬’},

                      {Blueberry: ‘藍莓’},                        

                      {orange: ‘橙子’}],

方法： handChange() {    

                  let oneFruits = JSON.stringify(this.persons, function (inx, ite) {

                    if (inx === ‘watermelon’ || inx === ‘orange’) {

                        return undefined

                    } else {

                        return ite } })

                  this.persons = JSON.parse(oneFruits) }

結果：

四、通過$set給數據注入值並更新視圖（解決在vue中新增數據不更新視圖的問題）

數據：     persons: [

                        {id: ‘1’,name: ‘蘋果’},

                        {id: ‘2’,name: ‘西瓜’},

                        {id: ‘3’,name: ‘檸檬’},

                        {id: ‘4’,name: ‘藍莓’} ]

方法：       handChange() {    

                    let oneFruits = JSON.parse(JSON.stringify(this.persons[0])) 

                    let twoFruits = JSON.parse(JSON.stringify(this.persons[1])) 

                    let newFruits = {id: ‘5’, name: ‘葡萄’}

                    console.log(twoFruits)             

                    this.$set(this.persons, 1, oneFruits) // 將西瓜的位置放上蘋果 

                    this.$set(this.persons, 0, twoFruits) // 將蘋果的位置方式西瓜

                    this.$set(this.persons, 4, newFruits) // 添加葡萄並更新視圖

                    console.log(this.persons) }

結果：

前端json數據進行base64編碼，怎麼做

將二進制文件進行可視化字符串編碼，比如BASE64編碼（電子郵件附件就是採取的這種編碼方法），編碼成為文本字符串，再轉換為JSON數據。 取出的時候將數據進行解碼即可還原圖像。 不推薦在JSON里存儲圖像數據。

前端怎麼解析json

不建議使用eval（）函數，因為eval（）接受任意的字符串，併當作JavaScript代碼來處理,這個機制已經有安全隱患了var str='{ “name”: “John” }’;var obj = eval (‘(‘ + str + ‘)’);alert(obj.name); $.parseJSON()和JSON.parse()函數用於將格式完好的JSON字符串轉為與之對應的JavaScript對象。所謂”格式完好”，就是要求指定的字符串必須符合嚴格的JSON格式，例如：屬性名稱必須加雙引號、字符串值也必須用雙引號。其次，JSON標準不允許字符串中出現”控制字符”，正確寫法應該是使用兩個反斜杠，以免被JS解析器直接轉義。 1、JSON字符串轉換為JSON對象var str='{ “name”: “John” ,”age”: “24” }’;var obj = $.parseJSON(str);alert(obj.name); //John var str = ‘{ “name”: “John”, “age”: “24” }’;var obj = JSON.parse(str);alert(obj.name); //John 2、將JSON對象轉換為字符串var obj={name: “John”, age: “24”};var last=JSON.stringify(obj);alert(last); //'{name: “John”, age: “24”}’ var obj={name: “John”, age: “24”};var last=obj.toJSONString();alert(last); //'{name: “John”, age: “24”}’ 3、解析讀取json對象var str={ “result”:{ “age”:”33″, “id”:”2server”, “name”:”mady” }};alert(str.result.age); //33 var result = $.parseJSON( ‘[ 1, true, “CodePlayer” ]’ );alert( result[1] ); // CodePlayer var result = $.parseJSON( “\”專註於編程開發技術分享\”” );alert(result); //專註於編程開發技術分享

如何將數據以json格式傳給前端

將數據以json格式傳給前端：

function generateDtb() {

//寫入

var txtName = document.getElementById(“txtName”).value;

//創建數組

var dtb = new Array();

//通過循環把數據寫入到數組並返回

for (var i = 0; i firstGroup.length; i++) {

var row = new Object();

row.Name = txtName;

row.fullMoney = firstGroup[i].value;

row.discount = secondGroup[i].value;

dtb.push(row);

}

return dtb;

}

把數組轉換成json串傳入到後台：

$(function () {

//點擊botton1

$(“#lbtnOK”).click(function () {

var url = “DiscountManger.aspx?ajax=1”;

var dtb = generateDtb();

// var strName = document.getElementById(“txtName”).value;

if (dtb == null)

{ }

else {

//序列化對象

var postdata = JSON.stringify(dtb);

//異步請求

$.post(url, { json: postdata }, function (json) {

if (json) {

jBox.tip(“添加成功！”, “提示”);

location.reload();

}

else {

jBox.tip(“添加失敗！”, “提示”);

location.reload();

}

}, “json”)

}

});

});

在後台的操作：

首先判斷是否需要傳輸數據

if (!IsPostBack)

{

//判斷是否異步請求

if (Request.QueryString[“ajax”] == “1”)

{

ProcessRequest();

}

在這裡進行對數據的處理：

/// summary

/// 處理異步請求

/// /summary

private void ProcessRequest()

{

//存入要填寫的策略

ArrayList arrDiscount = new ArrayList();

Response.ContentType = “text/html”;

string json = Request.Form[“json”];

//反序列化DataTable

if (json == null)

{

return;

}

else

{

DataTable newdtb = Json2Dtb(json);

for (int i = 0; i newdtb.Rows.Count; i++)

{

Entity.StrategyDiscount enStrategyDiscount = new Entity.StrategyDiscount();

//打折方案名

enStrategyDiscount.name = newdtb.Rows[i][“Name”].ToString();

//商店ID

enStrategyDiscount.shopId = long.Parse(LoginInfo.ShopID);

enStrategyDiscount.fullMoney = Convert.ToDecimal(newdtb.Rows[i][“fullMoney”].ToString());

enStrategyDiscount.discount = Convert.ToDecimal(newdtb.Rows[i][“discount”].ToString());

//寫入數據到數組

arrDiscount.Add(enStrategyDiscount);

}

//寫入數據到數據庫

IStrategyBLL strategy = new StrategyBLL();

if (strategy.AddStrategyDiscount(arrDiscount))

{

Response.Write(“true”);

Response.End();

}

else

{

Response.Write(“false”);

Response.End();

}

}

這裡，我們需要把json轉換成datatable

/// summary

/// Json轉DataTable

/// /summary

/// param name=”json”/param

/// returns/returns

private DataTable Json2Dtb(string json)

{

JavaScriptSerializer jss = new JavaScriptSerializer();

ArrayList dic = jss.DeserializeArrayList(json);

DataTable dtb = new DataTable();

if (dic.Count 0)

{

foreach (Dictionarystring, object drow in dic)

{

if (dtb.Columns.Count == 0)

{

foreach (string key in drow.Keys)

{

dtb.Columns.Add(key, drow[key].GetType());

}

}

DataRow row = dtb.NewRow();

foreach (string key in drow.Keys)

{

row[key] = drow[key];

}

dtb.Rows.Add(row);

}

}

return dtb;

}

這樣，就可以把數據無刷新的寫入到數據庫。

當然，如果我們有一個從數據庫讀取的datatable，如果通過json顯示在前台呢。

首先，我們需要把datatable轉換為json數據

/// summary

/// DataTable轉Json

/// /summary

/// param name=”dtb”/param

/// returns/returns

private string Dtb2Json(DataTable dtb)

{

JavaScriptSerializer jss = new JavaScriptSerializer();

ArrayList dic = new ArrayList();

foreach (DataRow row in dtb.Rows)

{

Dictionarystring, object drow = new Dictionarystring, object();

foreach (DataColumn col in dtb.Columns)

{

drow.Add(col.ColumnName, row[col.ColumnName]);

}

dic.Add(drow);

}

return jss.Serialize(dic);

}

然後寫回到前台

/// summary

/// 處理異步請求

/// /summary

private void ProcessRequest()

{

Response.ContentType = “text/html”;

string json = Request.Form[“json”];

//反序列化DataTable

DataTable newdtb = Json2Dtb(json);

//序列化DataTable為JSON

string back = Dtb2Json(newdtb);

Response.Write(back);

Response.End();

}

在前台接受顯示：

$(function() {

//點擊botton1

$(“#botton1”).click(function() {

createTable(json);

});

});

//顯示Json中的數據

function createTable(json) {

var table = $(“table border=’1’/table”);

for (var i = 0; i json.length; i++) {

o1 = json[i];

var row = $(“tr/tr”);

for (key in o1) {

var td = $(“td/td”);

td.text(o1[key].toString());

td.appendTo(row);

}

row.appendTo(table);

}

table.appendTo($(“#back”));

}