1. 程式人生 > >jquery form表單.serialize()序列化後中文亂碼問題原因及解決

jquery form表單.serialize()序列化後中文亂碼問題原因及解決

有時候我們需要使用ajax提交去提交form的值,這樣就需要使用serialize()去獲取form的值,但這樣獲取的值如果有中文,會亂碼,原因和解決方法如下:

原因:.serialize()自動呼叫了encodeURIComponent方法將資料編碼了 
解決方法:呼叫decodeURIComponent(XXX,true);將資料解碼 

如:

vardata=$('#addf').serialize();
data= decodeURIComponent(data,true);

這是網上的第一種常規做法,但是試了下,並不好用。

使用$(form).serialize()獲得表單的所有資訊:

我的設定:

1 工程編碼,js,jsp,java設定為UTF-8

2 JSP頁面編碼:

  <%@ page language="java" pageEncoding="UTF-8"contentType="text/html; charset=UTF-8"%> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>

3 JS中處理

encodeURI(encodeURI(data))  ///注意兩次編碼!!

4 Java類中處理

  response.setCharacterEncoding("UTF-8");    //response.setContentType("text/html;charset=UTF-8"); //用於向頁面輸送中文字串java.net.URLDecoder.decode((String)request.getParameter("username"),"UTF-8");

這是網上的第二種常規做法,也是一般的jsp基礎編碼設定。感覺主要是針對get方式提交表單,而我現在實在spring mvc中使用,要讓提交的表單資訊直接繫結要物件中。

但是缺出現了中文亂碼的問題。

  原始碼:

   $.ajax({

                           url:$("#form").attr("action"),

                            data:$('#form').serialize(),// 要提交的表單

                            dataType:'json',

                            success: function(data) {

                                     if(data){

                                               artDialog.alert(data.message);

                             if(data.succeed == true){

                                      gotoView('<%=path%>/userManage/getlist.do');

                            } 

                                     }  

                            }

                        });

出現亂碼的原因是:使用ajax請求,當沒有設定請求type時,預設採用的是get請求方式。而get請求方式的亂碼處理要採用

(String)request.getParameter("username"),"UTF-8");方式對每個中文進行單獨的轉碼才能避免亂碼的問題。

解決方法:

   當使用ajax序列化提交表單時,一定要使用post請求方式提交表單,避免亂碼問題。

    $.ajax({

                            type: "POST",

                           url:$("#form").attr("action"),

                            data:$('#form').serialize(),// 要提交的表單

                            dataType:'json',

                            success: function(data) {

                                     if(data){

                                               artDialog.alert(data.message);

                             if(data.succeed == true){

                                      gotoView('<%=path%>/userManage/getlist.do');

                            } 

                                     }  

                            }

                        });

相關推薦

jquery form.serialize()序列中文亂碼問題原因解決

有時候我們需要使用ajax提交去提交form的值,這樣就需要使用serialize()去獲取form的值,但這樣獲取的值如果有中文,會亂碼,原因和解決方法如下:原因:.serialize()自動呼叫了encodeURIComponent方法將資料編碼了 解決方法:呼叫deco

easyui form.serialize()序列中文亂碼問題原因解決

loginAndRegDialog=$('#loginAndRegDialog').dialog({closable:false,modal:true,buttons:[{text:"登入",handler:function(){var params=$('#LoginIn

form 序列

一般情況: $("form").serialize() 嚴格要求 Json 格式的情況: //使用 $("#form").serializeJson(); //定義 $.fn.serializeJson = function() { //form表單資料序列化為

關於《JavaWeb開發實戰經典》中接收封裝的文字資料出現中文亂碼問題的解決方法

smartupload亂碼問題 今天在寫smartupload的demo時,在接收表單資料時出現了中文亂碼,從網上綜合了各種方法才得以解決。 1.smartupload.html中可見對form使用enctype進行表單封裝 <!DOCTYPE html&

hive數據導出到csv亂碼原因解決方案

exce 默認 concat_ws 分隔符 語句 解決方案 打開 clas 連接 轉載自http://blog.csdn.net/lgdlxc/article/details/42126225 Hive表中的數據使用hive - e"select * from table"

jquery form序列

sele 序列 內容 var ria proc 個數 ali checkbox 一、serialize() 作用 serialize() 方法通過序列化表單值,創建 URL 編碼文本字符串。 語法 $(selector).serialize(); 比如 $("b

jquery form序列注意事項

我們先來講講表單中 中readonly和disabled的區別: readonly只對input和textarea有效, 但是disabled對於所以的表單元素都是有效的,包括radio,checkbox等 如果表單中使用的disabled那麼使用者是不能選

Extjs中Formcombobox重置初始值為空問題解決

【問題描述】:      有些時候Ext.form.FromPanel中的元件都寫好了,但是初始化的時候需要給元件填寫初始值,例如combobox,textarea等。     可以使用Ext.getCmp('combobox元素的id號').setValue('value');來設定初始值。但是這樣設定初

jQuery】利用序列根據name取,做的驗證

在前臺做表單的驗證的方式有很多種,具體思想是你先要把表單的要驗證項裡面的值取出來,然後再指令碼處進行判斷,最後根據判斷結果告警,然後給onsubmit="return XX()"那個函式,返回true與false的布林值。整個過程,把表單的要驗證項取出來是關鍵。在《【Jav

JQuery進行初始操作

標簽 break 進行 表單 jquer type val bre 可能 提供一種如果前臺頁面標簽比較多,如果挨個初始化的話可能會比較繁瑣,這時候我們可以將後臺傳遞的數據組裝為json串,前臺用jquery將代碼初始化到表單中。 function loadData(jso

資料 序列 為 js物件

$.fn.serializeObject = function () { var o = {}; var a = this.serializeArray(); $.each(a, function () { if (

ajax上傳檔案 基於jquery form上傳檔案

<script src="/static/js/jquery.js"></script><script> $("#reg-btn").click(function () { // 1. 取到使用者填寫的資料 var for

jquery資料序列成json,支援多維陣列

jQuery.formHelper = { getObject: function (urlserialize) { if (urlserialize) { urlserialize = decodeURI(urlserialize);

1、Jquery formajax提交 2、jquery.filter校驗多個相同型別的文字框是否輸入資料有重複

JSP引用該JS <script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script> 表單儲存按鈕 onclick=save(); func

Angular 4/5 formselect初始選中(簡單string和複雜物件)

1.問題場景 管理員增刪改查中的“改”操作。管理員有性別(sex)和崗位(position)屬性。其中,性別在後端為列舉型別,position為類。 要求進入管理員修改頁時,自動選擇性別,通過介面獲取所有崗位,並自動選中當前管理員的崗位。 2.實現思路

jQuery-form事件

<form action="#" method="get"> <input type="text" name="user"> <input

PHP處理Form提交的裁剪的base64的圖片並儲存 以cropbox.js控制元件為例

我在開發專案的時候,前端給的上傳頭像外掛是 cropbox.js ,當時覺得很好用,可是當要儲存圖片的時候問題來了,不知道怎麼儲存,百度了一大堆,發現很多人跟我一樣也沒有找到方法,不過思路都是一樣的,

Form實現匯出Excel實時去掉遮罩層解決方案

開發中我們經常遇到Form表單來匯出Excel,為了避免匯出時候時候使用者等待不急亂操作現象,需要給頁面加個遮罩層,一面體現匯出進度,另一方面可以防止使用者亂點選頁面。 程式碼如下: //匯出excelfunction doExportExcel(){ var annual

關於請求方式為GET的form,action屬性不能帶引數的問題

  若在頁面中有如下程式碼: <form action="XXX?name=Jack&age=10"> <input type="text" name="address"

Layui 在使用Layui框架中使用form中的標籤但是沒有css效果的解決方法

這是原來的程式碼 <label class="layui-form-label">搜尋選擇框</label> <div class="layui-input-inline"> <select name="module