Extjs Ajax 亂碼問題解決方案
更新時(shí)間:2009年04月15日 22:11:47 作者:
在Ext的使用過程中,一不留心就出現(xiàn)了亂碼,包括在客戶端提交給服務(wù)器的數(shù)據(jù)中出現(xiàn)了亂碼和服務(wù)器端返回給客戶端的數(shù)據(jù)中出現(xiàn)了亂碼,下面簡單分析一下出現(xiàn)亂碼的原因。
在一次頁面瀏覽過程中,客戶端對(duì)一個(gè)URL發(fā)起瀏覽請(qǐng)求,服務(wù)端針對(duì)這次請(qǐng)求進(jìn)行解析,而在字符編碼解析方面,首先他檢查該頁面中的字符編碼設(shè)置,即<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />,這樣,在頁面中顯示聲明了字符編碼為UTF-8,服務(wù)器就會(huì)將該頁面用UTF-8的編碼輸出,而如果頁面中沒有顯示聲明,在服務(wù)器中都有一個(gè)默認(rèn)的字符編碼,比如GB2312,針對(duì)沒有聲明的文件,他會(huì)用默認(rèn)編碼輸出,這個(gè)時(shí)候,如果頁面輸出又是UTF-8,這樣就會(huì)出現(xiàn)亂碼。
而在Ext中的提交數(shù)據(jù)的過程中,Ext框架用的是都是UTF-8編碼,而且通過JSON提交的數(shù)據(jù)也是UTF-8編碼,所以要求所有的文件都是UTF-8編碼。
解決亂碼的方法
以下幾項(xiàng)首先必須要在平時(shí)的編碼過程中做到:
?。?) JAVA后臺(tái)文件加入 response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
(2)在文件中顯示聲明字符編碼,<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
(3)對(duì)于提交中出現(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格式,那么也會(huì)出現(xiàn)問題! 所以就要對(duì)開發(fā)環(huán)境也有一個(gè)要求。
開發(fā)環(huán)境的配置
如果采用記事本來編寫保存代碼文件(.js),那這個(gè)就會(huì)出問題,主要是由于在windows系統(tǒng)里記事本默認(rèn)的編碼格式是ANSI,這樣基本上和目前網(wǎng)頁中編碼的格式都不同因此就會(huì)出現(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后臺(tái)文件加入 response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
(2)在文件中顯示聲明字符編碼,<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
(3)對(duì)于提交中出現(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格式,那么也會(huì)出現(xiàn)問題! 所以就要對(duì)開發(fā)環(huán)境也有一個(gè)要求。
開發(fā)環(huán)境的配置
如果采用記事本來編寫保存代碼文件(.js),那這個(gè)就會(huì)出問題,主要是由于在windows系統(tǒng)里記事本默認(rèn)的編碼格式是ANSI,這樣基本上和目前網(wǎng)頁中編碼的格式都不同因此就會(huì)出現(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 grid panel自帶滾動(dòng)條失效的解決方法
對(duì)gridPanel中的stroe數(shù)據(jù)進(jìn)行過濾,所以有時(shí)候總是導(dǎo)致gridPanel自身所帶的scrollbar失效,好了,現(xiàn)在來說說怎么解決scrollbar失效2014-09-09ExtJS 刷新后如何默認(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)限問題 要求控制的對(duì)象是 菜單,按鈕,URL
這兩天在解決extjs 的權(quán)限問題。要求控制的對(duì)象是 菜單,按鈕,URL2010-03-03extjs tabpanel限制選項(xiàng)卡數(shù)量實(shí)現(xiàn)思路及代碼
使用的是用變量存儲(chǔ) 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)自動(dòng)提示,自動(dòng)選中的解決方法
ext combox 如果想實(shí)現(xiàn)類似于 baidu 搜索時(shí)的提示功能。必須禁止其分頁功能才可以。2010-02-02