前端:
$("#save_config_btn").click(function(){ $.ajaxSetup({ cache:false, contentType : "application/x-www-form-urlencoded; charset=utf-8" }); var fields = $("#rss_form").serializeArray(); fields = JSON.stringify(fields) //中文會亂碼 $.ajax({ type: "POST", url : "edit.php", data: fields, success: function(msg){ alert(msg); } }); });
PHP:
';print_r($data);?>
通過 JSON.stringify 擷取到的json格式如下:
[{ "name":"Bill" , "value":"Gates" },{ "name":"George" , "value":"Bush" },{ "name":"Thomas" , "value":"Carter" }]
PHP,這裡POST的接收值不知道用什麼,如果把上面的json字串改成如下格式,那麼PHP即可接受到並直接返回數組格式
{"data":[{ "name":"Bill" , "value":"Gates" },{ "name":"George" , "value":"Bush" },{ "name":"Thomas" , "value":"Carter" }]}
總結下主要想問兩個問題:
1、JQuery如何把serializeArray()擷取到的json對象轉換為 第二種格式的json字串 且保證中文不會亂碼
2、或者php如何直接接收 json對象 或者 第一種格式的 json字串
回複討論(解決方案)
1、JQuery如何把serializeArray()擷取到的json對象轉換為 第二種格式的json字串 且保證中文不會亂碼
保證不亂碼,需要在header加入
第二種數組格式
var fields = $("#rss_form").serializeArray();
var t = {};
t['data'] = fields
fields = JSON.stringify(t);
2、或者php如何直接接收 json對象 或者 第一種格式的 json字串
用第一種json字串提交例子:
js test
demo.php
運行後:
test.log內容為[{"name":"中文","value":"中文"},{"name":"中文","value":"中文"},{"name":"中文","value":"中文"}]
如果沒有加 則會亂碼。
1、ajax 本身就是以 utf-8 編碼傳輸,所以不需要再有 charset=utf-8 聲明
2、jq 的 post 方式已經發了 application/x-www-form-urlencoded 頭,也不需要你再勞動了
所以
$.ajaxSetup({ cache:false, contentType : "application/x-www-form-urlencoded; charset=utf-8" });一段是不需要的。考慮的 IE 的緩衝可能會影響效果,可以把 cache: false 作為 $.ajax 的參數
$.ajax({ cache: false, type: "POST",
3、JSON.stringify 是 json2.js 類庫提供的,不屬於 jq 的範疇。所以 jq 並不需要使用他來加工資料
況且 JSON.stringify 將對象(數組)轉換成了 json 格式串,用它發送時,服務端還需解碼
4、為了便於說明問題,我做了一個測試例
php 端 jq_server.php
<?phpecho $s = print_r($_POST, 1);var_dump('is utf-8 ?', mb_check_encoding($s, 'utf-8'));</pre>html 端 <pre class="sycode" name="code"></pre> <br /> 去掉 fields = JSON.stringify(fields); 後 <br /> <br /> 把 var fields = $("#rss_form").serializeArray(); <br /> 改為 var fields = $("#rss_form").serialize(); <br /> 把 data: {data : fields}, <br /> 還原成 data: fields, <br /> <br /> <br /> 既然你是在學習 jquery 的 ajax 的使用,那麼就該多做一些測試 </p> <p class="sougouAnswer"> 太感謝了,非常感謝兩位的解答<li ><i class="layui-icon">