Ⅰ 前端怎麼解析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]...
所以傳的值應該是