json串在前后台之间传递解析问题

json 样式 :   [{"key":1,"value":"big"},{"key":2,"value":"pig"}]

前端界面添加生成动态添加按钮


json串在前后台之间传递解析问题_第1张图片

jqGrid相关代码:

$(function(){

$('#addSpec').click(function(){

$('#main').append('

确定取消
');

});

$('body').on("click",'#del',function(){

$(this).parent().remove();

i--;

});

$('body').on("click",'#add',function(){

$(this).parent().remove();

if(i <9){

$('#specText').append($(this).prev().val()+",");

varjson = {};                

json.key = i;                                    //此处生成json串中key格式

json.value= ($(this).prev().val());          //此处生成json串中key格式

specs.push(json);            

data = specs;                      //生成 [{"key":1,"value":"big"},{"key":2,"value":"pig"}]

}

i++;

});

});

后台处理json串


此刻在传递到后台的json串名称为children,内容为[{"key":1,"value":"big"},{"key":2,"value":"pig"}],要做相应的操作才可以准确的存入数据库中。

声明对象,添加相应的值。注意在setChildren中要做相应的转换。

json串在前后台之间传递解析问题_第2张图片

这样就可以解决json串传入数据库引号的问题。

json串数据库至前端的相应转换


jqGrid加入转换的childrenFormat,代码如下:


json串在前后台之间传递解析问题_第3张图片
json串在前后台之间传递解析问题_第4张图片

这样在前端列表显示的便是json串中value属性的值。


接下来的几个调试方法,可以准确的得到数据,也加快工作效率。

1.idea工具的dubug模式下,在watches中写入具体某句代码,会显示该代码的执行结果。


json串在前后台之间传递解析问题_第5张图片

2.在浏览器中启动F12查看源代码,跟进相应js然后debug。在浏览器Watch中也可以实现上面的操作。具体情况如下:


json串在前后台之间传递解析问题_第6张图片

3.在该模式下的console中也可以显示相应的代码结果。


json串在前后台之间传递解析问题_第7张图片

你可能感兴趣的:(json串在前后台之间传递解析问题)