【JSON】JSON在前端和后端传递

后端：我们假定使用的是java语言

前端：毫无疑问是js

java语言：是一种强类型的语言，必须定义类型，然后生成实例；而js却不是，虽然它也是面向对象的，但是它并没有先定义类这一种概念（但是js也有类型），它是基于原型的一种模式，和java完全不同。很显然，二者的原理，机制，语法并不能兼容。二者产生的对象并不能被对方解读。再来看网络传输，通常就是http/tcp协议喽，使用的其实是请求-响应，再说白了即使字符串，不论后台传来的是什么类型的数据，也不论前台传回的什么类型的数据，网络层统统当作字符串处理，它也没有办法来解析类型啊！说到这里，前后台传数据也就只能用字符串了，那也就意味着它们各自都要完成一个转换过程，把要发送的转换成字符串，把要收到的字符串解析成自己的对象。因为传输的字符串会涉及前后台双方的解析和处理，所以双方都必须认识或者知道字符串该怎么转，也就是说，最好能有一种通用的规则来编辑，转换字符串，这个标准或者协议就是JSON，JSON就是用来交换数据的，是一种string，一种独立于平台的数据格式。

这样一来，前台就需要把自己的数据类型转成JSON，然后发给后台，后台在用JSON来解析数据，转换成自己的类型。后台传前台一样。那么，怎么把自己的数据转成JSON呢？

`JSON`对象可以通过JavaScript存取属性！JSON对象封装成JSON字符串经常用于前后台传输数据！

如果在前端使用，那么JSON对象可以通过 对象.属性名 来调用，如果是json字符串，那么只是字符串了！

在数据传输过程中，JSON是以文本、即字符串的形式传递的，而JavaScript *** 作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。

JSON字符串：var str = '{ name: 'xmt', sex: 'woman' }'；

JSON对象：   var str = { name: 'xmt', sex: 'woman' }；

JSON字符串转化为JSON对象：var obj = JSON.parse(str) ；

JSON对象转化为JSON字符串：var str = JSON.stringify(obj)；

现在不管是web端还是客户端，请求使用的都基本是用json格式，像iOS中，使用字典键值带参

客户端这样的做法，是为了更好的处理参数。

再例如小程序端的参数带值也是如此

JavaScript中 XMLHttpRequest 的网络请求

当然 JavaScript中可以使用 FormData 结合 application/x-www-form-urlencoded

说完前端请求，就到SpringBoot的处理了json数据

好吧，其实就是这么简单

这里提供两个我写好的接口，仅供学习（ 请勿偷袭服务器！！！ ）

将数据以json格式传给前端：

function generateDtb() {

//写入

var txtName = document.getElementById("txtName").value

//创建数组

var dtb = new Array()

//通过循环把数据写入到数组并返回

for (var i = 0i <firstGroup.lengthi++) {

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 = 0i <newdtb.Rows.Counti++)

{

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.Deserialize<ArrayList>(json)

DataTable dtb = new DataTable()

if (dic.Count >0)

{

foreach (Dictionary<string, 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)

{

Dictionary<string, object>drow = new Dictionary<string, 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 = 0i <json.lengthi++) {

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"))

}

---