Extjs Ajax 亂碼問題解決方案
更新時(shí)間:2009年04月15日 22:11:47 作者:
在Ext的使用過程中,一不留心就出現(xiàn)了亂碼,包括在客戶端提交給服務(wù)器的數(shù)據(jù)中出現(xiàn)了亂碼和服務(wù)器端返回給客戶端的數(shù)據(jù)中出現(xiàn)了亂碼,下面簡單分析一下出現(xiàn)亂碼的原因。
在一次頁面瀏覽過程中,客戶端對一個(gè)URL發(fā)起瀏覽請求,服務(wù)端針對這次請求進(jìn)行解析,而在字符編碼解析方面,首先他檢查該頁面中的字符編碼設(shè)置,即<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />,這樣,在頁面中顯示聲明了字符編碼為UTF-8,服務(wù)器就會將該頁面用UTF-8的編碼輸出,而如果頁面中沒有顯示聲明,在服務(wù)器中都有一個(gè)默認(rèn)的字符編碼,比如GB2312,針對沒有聲明的文件,他會用默認(rèn)編碼輸出,這個(gè)時(shí)候,如果頁面輸出又是UTF-8,這樣就會出現(xiàn)亂碼。
而在Ext中的提交數(shù)據(jù)的過程中,Ext框架用的是都是UTF-8編碼,而且通過JSON提交的數(shù)據(jù)也是UTF-8編碼,所以要求所有的文件都是UTF-8編碼。
解決亂碼的方法
以下幾項(xiàng)首先必須要在平時(shí)的編碼過程中做到:
?。?) JAVA后臺文件加入 response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
(2)在文件中顯示聲明字符編碼,<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
(3)對于提交中出現(xiàn)的亂碼,在Ext中可以修改Request Header中Content-Type的設(shè)置,具體的方法為:Ext.lib.Ajax.defaultPostHeader += ";charset=utf-8";
最后,問題還可能出現(xiàn)在文件的保存格式上。就是你把代碼文件保存的時(shí)候,如果開發(fā)環(huán)境默認(rèn)保存的不是UTF-8格式,那么也會出現(xiàn)問題! 所以就要對開發(fā)環(huán)境也有一個(gè)要求。
開發(fā)環(huán)境的配置
如果采用記事本來編寫保存代碼文件(.js),那這個(gè)就會出問題,主要是由于在windows系統(tǒng)里記事本默認(rèn)的編碼格式是ANSI,這樣基本上和目前網(wǎng)頁中編碼的格式都不同因此就會出現(xiàn)編碼格式不正確的問題。解決辦法就是打開xx.js文件然后另存為,在保存類型處選擇utf-8編碼格式就可以了。
當(dāng)然,主流還是使用MyEclipse,所以說一下MyEclipse里要配置哪些地方。
Preferences->General->Content Types 選中Text 編輯下面的Default encoding 為utf-8然后Update。
Preferences->General->Content Types->Editors->Text Editors->Spelling 下Encoding 選 Default(UTF-8)
Preferences->General->Content Types->Workspace下Text File Encoding 選 Other: UTF-8
最后如果還出現(xiàn)亂碼 , 利用
System.out.print(request.getCharacterEncoding());
System.out.print(response.getCharacterEncoding());
察看request 或 response 編碼是否不是utf-8
若不是,利用web.xml中的 filter 解決.
如
<filter>
<description>no</description>
<display-name>EncodingFilter</display-name>
<filter-name>EncodingFilter</filter-name>
<filter-class>
com.hope.filters.SetCharacterEncodingFilter
</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
</filter>
或者設(shè)置
<globalization responseEncoding="utf-8" fileEncoding="utf-8" requestEncoding="utf-8"/>
Good Luck!
而在Ext中的提交數(shù)據(jù)的過程中,Ext框架用的是都是UTF-8編碼,而且通過JSON提交的數(shù)據(jù)也是UTF-8編碼,所以要求所有的文件都是UTF-8編碼。
解決亂碼的方法
以下幾項(xiàng)首先必須要在平時(shí)的編碼過程中做到:
?。?) JAVA后臺文件加入 response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
(2)在文件中顯示聲明字符編碼,<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
(3)對于提交中出現(xiàn)的亂碼,在Ext中可以修改Request Header中Content-Type的設(shè)置,具體的方法為:Ext.lib.Ajax.defaultPostHeader += ";charset=utf-8";
最后,問題還可能出現(xiàn)在文件的保存格式上。就是你把代碼文件保存的時(shí)候,如果開發(fā)環(huán)境默認(rèn)保存的不是UTF-8格式,那么也會出現(xiàn)問題! 所以就要對開發(fā)環(huán)境也有一個(gè)要求。
開發(fā)環(huán)境的配置
如果采用記事本來編寫保存代碼文件(.js),那這個(gè)就會出問題,主要是由于在windows系統(tǒng)里記事本默認(rèn)的編碼格式是ANSI,這樣基本上和目前網(wǎng)頁中編碼的格式都不同因此就會出現(xiàn)編碼格式不正確的問題。解決辦法就是打開xx.js文件然后另存為,在保存類型處選擇utf-8編碼格式就可以了。
當(dāng)然,主流還是使用MyEclipse,所以說一下MyEclipse里要配置哪些地方。
Preferences->General->Content Types 選中Text 編輯下面的Default encoding 為utf-8然后Update。
Preferences->General->Content Types->Editors->Text Editors->Spelling 下Encoding 選 Default(UTF-8)
Preferences->General->Content Types->Workspace下Text File Encoding 選 Other: UTF-8
最后如果還出現(xiàn)亂碼 , 利用
System.out.print(request.getCharacterEncoding());
System.out.print(response.getCharacterEncoding());
察看request 或 response 編碼是否不是utf-8
若不是,利用web.xml中的 filter 解決.
如
<filter>
<description>no</description>
<display-name>EncodingFilter</display-name>
<filter-name>EncodingFilter</filter-name>
<filter-class>
com.hope.filters.SetCharacterEncodingFilter
</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
</filter>
或者設(shè)置
<globalization responseEncoding="utf-8" fileEncoding="utf-8" requestEncoding="utf-8"/>
Good Luck!
相關(guān)文章
ExtJS 刷新后如何默認(rèn)選中刷新前最后一次選中的節(jié)點(diǎn)
這篇文章主要介紹了ExtJS 刷新后如何默認(rèn)選中刷新前最后一次選中的節(jié)點(diǎn),需要的朋友可以參考下2014-04-04ExtJS4 表格的嵌套 rowExpander應(yīng)用
今天做一個(gè)grid,里面的數(shù)據(jù)需要帶明細(xì),思來想去還是搞個(gè)表格嵌套吧,需要的朋友可以參考下2014-05-05extjs 的權(quán)限問題 要求控制的對象是 菜單,按鈕,URL
這兩天在解決extjs 的權(quán)限問題。要求控制的對象是 菜單,按鈕,URL2010-03-03extjs tabpanel限制選項(xiàng)卡數(shù)量實(shí)現(xiàn)思路及代碼
使用的是用變量存儲 id 加載新的選卡時(shí) 交換 id ,從而限制了打開的選項(xiàng)卡數(shù)量,如果不是一定要這個(gè)效果,建議不要頻繁的關(guān)閉和創(chuàng)建tabpanel,感興趣的朋友可以參考下哈2013-04-04extjs grid取到數(shù)據(jù)而不顯示的解決
在使用extjs gridpanel時(shí),當(dāng)將數(shù)據(jù)載入時(shí),grid中的數(shù)據(jù)并沒有顯示出來。2008-12-12ext combox 下拉框不出現(xiàn)自動提示,自動選中的解決方法
ext combox 如果想實(shí)現(xiàn)類似于 baidu 搜索時(shí)的提示功能。必須禁止其分頁功能才可以。2010-02-02