动态添加“＜input onclick=“‘+json+‘“＞“元素传参时不识别json的bug问题解决

问题描述:

var json = {a:1};
在html中使用js方法动态添加

"<input οnclick="functiona(\''+json+\'')">"

元素时不识别json数据

问题分析:

json在传参时,json为json格式的数据,传入后调用onclick方法只会显示未识别.

var json2 = JSON.stringify(json);

将json2传入后调用会在遇到json2数据中的第一个双引号后戛然而止,因为动态添加的方法在传入json2字符串数据后会有双引号{“a”:1},会与

"<input οnclick="functiona(\''+json+\'')">"

中出现的双引号产生冲突

问题解决:

将json数据string化后再将双引号全部转化为\'反斜杠单引号再进行动态添加元素

var data2 = JSON.stringify(json).replace(/\"/g,"\\\'");
"<input οnclick="functiona(\''+json+\'')">"

导入的结果可以正常读取

function functiona(data){
	//将反斜杠去掉再将单引号变成双引号
	var list = data.replace(/\\/g,"").replace(/\'/g,"\"");
	//将list转化为json格式的数据
	var data2 = {"ids": id,"list":[JSON.parse(list)]};
	//如果data2需要提交给后台的话需要将data2转换为string化的数据
	//注意使用data2.toString()的结果为"[object Object]"
	//只能使用JSON.stringify(data2)进行转string化
	//ajax中的 dataType: "json",contentType: 'application/json;charset=UTF-8',
	//springboot后台接收要加@RequestBody接收像这种Vo类型的数据,不加@RequestBody会报错
}