Ⅰ 前端怎么解析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); //专注于编程开发技术分享
Ⅱ Formdata 的用法
FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。
var formData = new FormData();
使用append（）来添加数据
formData.append("file","target”);
formData里面存储的数据形式，一对key/value组成一条数据，key是唯一的，一个key可能对应多个value。如果是使用表单初始化，每一个表单字段对应一条数据，它们的HTML name属性即为key值，它们value属性对应value值。
我们可以通过get(key)/getAll(key)来获取对应的value，
添加数据 ：
我们可以通过append(key, value)来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾
设置修改数据 ：
我们可以通过set(key, value)来设置修改数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值。
判断是否该数据 ：
我们可以通过has(key)来判断是否对应的key值
删除数据 ：
通过delete(key)，来删除数据
遍历
我们可以通过entries()来获取一个迭代器，然后遍历所有的数据，
前端向后端传formData格式的数据时，一般用post方式，因为post可以传的数据量比较大，速度快。
Request Payload 请求头部的 Content-Type: application/json，请求正文是一个 json 格式的字符串
Form Data 请求头部的 Content-Type: application/x-www-form-urlencoded
因为application/x-www-form-urlencoded传输的数据太小了 不适合传输文件 后来升级为multipart/form-data
Ⅲ SpringMVC中，前台传json数组，后台怎么接受，然后解析成list
如果json数组直接作为POSTDATA的内容传递，Controller在方法上声明@RequestBody，参数选好类型，名称随缘，你会得到数组或List，但是需要依赖jackson包
如果json作为FORMDATA传递，Controller方法参数为String，名称需要与表单参数相同，你会得到json字符串
Ⅳ Http请求之FormData和Payload
FormData和Payload是浏览器传输给接口的两种格式，这两种方式浏览器是通过Content-Type来进行区分的， 如果是 application/x-www-form-urlencoded的话，则为Form Data方式，如果是application/json或multipart/form-data的话，则为 Request Payload
的方式 。
其中：
请求头为：
// Query String Parameters
x=1&y=2
默认的content-type：content-type为application/x-www-form-urlencoded
请求头为：
// Form Data
x=1&y=2
content-type：application/json
// Request Payload
x=1&y=2
相关扩展阅读：
好了，到这里我们知道了，其实都是放到了payload中。那么具体有什么区别呢？为什么有时候后端拿不到值呢？这就不得不说对payload的解析方式了。我们以几个chrome下的测试案例，来理一理这个逻辑。
场景构造
<form action="/" method="POST">
<input name="name" type="text">
<input name="password" type="text">
<button>提交</button>
</form>
如果我这里点击提交按钮，就会触发浏览器的提交功能，那结果是什么样呢？
注意点
可以看到Content-Type为application/x-www-form-urlencoded。
值得形式是以key1=value1&key2=value2的形式提交的。
场景构造
function submit2() {
var xhr = new XMLHttpRequest();
xhr.timeout = 3000;
var obj = {a: 1, b: 2};
xhr.open('POST', '/');
xhr.send(obj);
}
首先我们构造一个简单的函数，然后触发它。通过chrome反馈来看：
注意点
1.默认的Content-Type为text/plain。
2.Request Payload会对非字符串做字符串转换。
3.通过xhr.send(JSON.stringify(obj));可修正要发的内容
场景构造
由于axios已经是vue、react的准标配请求方式了，所以这里探究一下它。
首先我门看axios的文档，当post提交时候可以传递什么类型参数：
注意这个类型，我们分别构造两个场景。对应它。
function submit3() {
var sence1 = 'name=123&val=456'
var sence2 = {name: 123, val: 456};
axios.post('/', sence1)
}
分别传递字符串与对象，提交post请求，然后观察结果:
场景1——传递字符串时候的结果：
场景2——传递对象的结果：
注意点
1.当我们传递字符串的时候，Content-Type自动转为xxx-form-xxx的形式。当为对象的时候，自动转化为xxx/json。
2.字符串的时候以key1=val1&key2=val2的形式体现，对象以JSON字符串形式体现。
探索了这么多种情况之后，那么我们回顾一下：
Content-Type的差异
1.传统的ajax请求时候，Content-Type默认为"文本"类型。
2.传统的form提交的时候，Content-Type默认为"Form"类型。
3.axios传递字符串的时候，Content-Type默认为"Form"类型。
4.axios传递对象的时候，Content-Type默认为"JSON"类型
Content-Type的值，Form与非Form时，payload的区别。
1.都只支持字符串类型(以上探究的几种情况)
2.Form需要传递的格式为key1=value1&key2=value2,类似GET请求的QueryString格式
3.非Form一般为JSON.stringify(formDataObject)形式
无论何种形式传递，后端解析表单信息的时候，会考虑Content-Type。如果是JSON字符串的话，后端解析payload的内容时候，肯定要去解析JSON啦。如果是key1=value1&key2=value2的形式，则需要去分割字符串。
当然这些事情一般后端使用的框架会去处理，但是框架给后端提供取值接口有可能是不同的，所以前端的小伙伴在处理请求问题时，一定要跟后端小伙伴商量好，是用JSON还是FormData哈。
Ⅳ 怎么把json直接转成form表单的元素显示在前台
前台必须先有一个模板来接受数据,这个模板可以是你自定义的,假设你的数据对象是
1
data = [{"name":"张三", "age":"21"},{"name":"李四", "age":"21"},{"name":"<a href="https://www..com/s?wd=%E7%8E%8B%E4%BA%94&tn=44039180_cpr&fenlei=-EUBtkP1RYP1bvnjf3PHDdrHmdPHf3" target="_blank" class="-highlight">王五</a>", "age":"21"}]
前台模板为
1
2
3
4
<div id="muban">
<ul id="ml">
</ul>
</div>
数据操作为
1
2
3
4
5
for(var i = 0;i < data.length;i++){
var a = "<li>姓名：" + data[i].name + ",年龄: "+ data[i].age +"</li>";
var $ul = document.getElementById("ml");
$ul.append(a);
}
Ⅵ 前端向后端传一个json数组对象
首先在前端已经获取到这个数组对象：
后端需要接受的json数组格式：
刚开始一直想需要把数组转成json数组，然后再传给后端接口，
最后才发现 ajax请求会自动把数组转成json数组 ，我们就不用再去转一次，
但是最后发现还是报未知错误，经查看发现传给后端的数据变成：0:[Object object]...
最后发现在前端向后端传输的数据进行定义：
可以看到当发送数据的方式是“post”的时候，如果不传或者传的是true，就会把发送的json数据转成formdata对象，所以在页面中我们可以看到发送的数据变成了：0:[Object object],1:[Object object]...
所以传的值应该是