jquery serialize傳中文亂碼解決方法

jquery form 表單.serialize()序列化後中文亂碼 經過一天的時間終於解決了!
一開始的時候我並不知道亂碼問題是jquery引起的!
我以爲是後臺轉碼的時間出錯了!
最後在網絡上到了關鍵信息:

jquery form表單.serialize()序列化後中文亂碼問題原因及解決
原因:.serialize()自動調用了encodeURIComponent方法將數據編碼了 
解決方法:調用decodeURIComponent(XXX,true);將數據解碼 
例如: 
var params = jQuery("#formId").serialize(); // http request parameters. 
params = decodeURIComponent(params,true);
在進行編碼
params = encodeURI(encodeURI(params));
 
後臺
String paramsTrans = new String(params.getBytes("ISO-8859-1"),"UTF-8");
params = java.net.URLDecoder.decode(paramsTrans , "UTF-8");
問題解決。
----------------------------------------------------------------------------------------------------------------------------------
注意:頁面端發出的數據作兩次encodeURI這個做的好處在於,不管瀏覽器用戶在頁面來設置編碼,服務器所採用的編碼來做一次URLencode轉換成UTF-8.
encodeURL函數主要是來對URI來做轉碼,它默認是採用的UTF-8的編碼.
 
具體說明2次encodeURI:

其中具體的原理分析如下,假設頁面端輸入的中文是一個“中”,按照下面步驟進行解碼
1.第一次encodeURI,按照utf-8方式獲取字節數組變成[-28,-72-83],對字節碼數組進行遍歷,把每個字節轉化

成對應的16進制數,這樣就變成了[E4,B8,AD],最後變成[%E4,%B8,%AD]

2.第二次encodeURI,把數組最後變成[%25E4,%25B8,%25AD]然後就把處理後的數據[%25E4,%25B8,%25AD]

發往服務器端,當應用服務器調用getParameter方法,getParameter方法會去向應用服務器請求參數
應用服務器最初獲得的就是發送來的[%25E4,%25B8,%25AD],應用服務器會對這個數據進行URLdecode操作,

URldecode操作和encodeURL操作是相反的操作,處理結果就是[%E4,%B8,%AD],並把這個值返回

給getParameter方法

然後再在服務器端中調用相應的URL轉碼方法或者是函數  就可以把數據還原成最初頁面發送過來的中文“中”了。

來源: <http://blog.csdn.net/xiao2shiqi/article/details/8438019>

jsp:
<form class="form-horizontal" role="form"  id="form">
<div class="form-group">
<label for="olderName" class="col-sm-2 control-label">老人名稱</label>
<div class="col-sm-4">
<input type="text" class="form-control"
  name="olderName" id="olderName" placeholder="老人名稱">
</div>
</div>
<div class="form-group">
<label for="olderNo" class="col-sm-2 control-label">老人編號</label>
<div class="col-sm-4">
<input type="text" class="form-control"
  name="olderNo" id="olderNo" placeholder="老人編號">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<button type="button" id="search" class="btn btn-primary pull-right">查詢</button>
</div>
<div class="col-sm-6">
<button type="submit" class="btn btn btn-default">清空</button>
</div>
</div>
</form>

js:


$(function () {
$('#search').click(function () {
var formdata=$("#form").serialize();
console.log(formdata);
formdata = decodeURIComponent(formdata,true);
console.log(formdata);
formdata = encodeURI(encodeURI(formdata));
console.log(formdata);
$('#datatable').bootstrapTable('refresh', {
url:"${ctx}/bse/older/find?rnd="+Math.random()+"&"+formdata
});
});
});

打印出的信息:

olderName=%E5%A5%BD%E4%BA%BA&olderNo=
olderName=好人&olderNo=
olderName=%25E5%25A5%25BD%25E4%25BA%25BA&olderNo=

後臺:

拿到數據後進行解碼


@RequestMapping(value="find",produces ="plain/text; charset=UTF-8")
public String find(BseOlder bseOlder, HttpServletRequest request, HttpServletResponse response, Model model) throws UnsupportedEncodingException {
    System.out.println("olderName:" + bseOlder.getOlderName() + " olderNo:" + bseOlder.getOlderNo());
    bseOlder.setOlderName(java.net.URLDecoder.decode(bseOlder.getOlderName(), "UTF-8"));
    bseOlder.setOlderNo(java.net.URLDecoder.decode(bseOlder.getOlderNo(), "UTF-8"));
    System.out.println("olderName:" + bseOlder.getOlderName() + " olderNo:" + bseOlder.getOlderNo());
    Page<BseOlder> page = bseOlderService.findPage(new Page<BseOlder>(request, response), bseOlder);
    model.addAttribute("page", page);
    return renderString(response,page.getList());
}

打印出的信息:

olderName:%E5%A5%BD%E4%BA%BA olderNo:olderName:好人 olderNo:

過程跟蹤:

  1. 查詢:“好人” 點擊提交;
  2. 從form表單中序列化數據到formdata  olderName=%E5%A5%BD%E4%BA%BA&olderNo=    好人變成 %E5%A5%BD%E4%BA%BA
  3. 步驟1中已經進行了一次encode編碼,解碼decodeURIComponent一次  olderName=好人&olderNo=  好人變成  好人
  4. 再一次encode編碼 olderName=%25E5%25A5%25BD%25E4%25BA%25BA&olderNo=  好人變成 %25E5%25A5%25BD%25E4%25BA%25BA
  5. 提交到後臺  
  6. 後臺進行反向操作 接收到的數據 olderName=%25E5%25A5%25BD%25E4%25BA%25BA&olderNo= 封裝在bseOlder bean中 
  7. 信息 進行數據進行URLdecode操作,URldecode操作和encodeURL操作是相反的操作 olderName:%E5%A5%BD%E4%BA%BA olderNo:  好人變成 %E5%A5%BD%E4%BA%BA
  8. 再次對信息進行轉碼 bseOlder.setOlderName(java.net.URLDecoder.decode(bseOlder.getOlderName(), "UTF-8")); 好人變成  好人
  9. 到此就完成了前臺到後臺的信息轉碼解碼之間傳遞。
發佈了45 篇原創文章 · 獲贊 5 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章