解决ajax提交表单时中文乱码的问题

8是wo的错

8是wo的错

2016-02-19 18:47

图老师小编精心整理的解决ajax提交表单时中文乱码的问题希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

网上搜索结合自己开发过程中遇到的情况,整理一下,以备忘:

Ajax表单提交数据出现乱码和解决办法

   //要传递的参数
   var queryString = "firstName=" + firstName + "&lastName=" + lastName
                          + "&birthday=" + birthday;    function 

//GET方式提交   
doRequestUsingGET() {   
         createXMLHttpRequest();   
        var url = "GetAndPostExample?" + queryString + "&timeStamp="  
                           + new Date().getTime();   
         xmlHttp.onreadystatechange = handleStateChange;   
         xmlHttp.open("GET", url, true);   
         xmlHttp.send(null);   
}   
  
//POST方式提交   
function doRequestUsingPOST() {   
         createXMLHttpRequest();   
        var url = "GetAndPostExample?timeStamp=" + new Date().getTime();   
         xmlHttp.open("POST", url, true);   
         xmlHttp.onreadystatechange = handleStateChange;   
         xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");   
         xmlHttp.send(queryString);   
}  
当在servlet接收参数时,必须要这样:
//当用POST方法时,一定要设置成utf-8,否则乱码
String firstName = new String(request.getParameter("firstName").getBytes("ISO-8859-1"), "utf-8");

//当用GET方法时,要设置成GB2312,否则乱码。
String lastName = new String(request.getParameter("lastName").getBytes("ISO-8859-1"), "GB2312");

在另一网友秋忆博客,找到了另一种方法,以下是原文的内容:

前段时间写JSP,使用AJAX以POST方式提交数据,如果是中文字符提交就会乱码,后来写ASP时用到AJAX以POST方式提交数据,中文一样是乱码。搜索一下相关资料,问题应该是提交数据时是以UTF-8编码提交,所以接收时如果使用GB2312或者其它中文编码的话就会乱码。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

使用GET方式提交数据的时候,中文问题很好解决,setRequestHeader("Content-Type","text/html; encoding=gb18030")就可以了。但这个方法在POST方式中却不起作用。大家都知道GET方式提交数据有长度限制,有时我们必须使用 POST方式来提交数据。

对于使用POST,JSP的解决方法如下:
使用escape(或encodeURI,两个函数都是JavaScript的函数,功能基本相同,可以查一下相关的帮助),但要使用两次,这个是关键。

初始页面内容如下(hello.jsp):
%@ page language="java" import="java.util.*" pageEncoding="GB18030"%
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
titleAJAX提交页面/title
meta http-equiv="Content-Type" content="text/html; charset=GB18030"
script type="text/javascript"
function justdo(){
    var post = "name=王力猛&email=wallimn@sohu.com&bokee=http://wallimn.bokee.com";
    post = encodeURI(post);
    post = encodeURI(post);    //两次,很关键
    var xmlObj = new ActiveXObject("Msxml2.XMLHTTP");
    var URL = "act.jsp";    //文件名需要调整成测试时的相应位置
    xmlObj.open("POST",URL,true);
    xmlObj.setRequestHeader("Cache-Control","no-cache");
    xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
    xmlObj.send(post);    //注意:POST方式,使用这个来发送内容

}
/script
/head
body
input type="button" value="提交" onclick="justdo()" /
/body
/html

Ajax请求处理页面(act.jsp)的内容如下:
%@ page language="java" import="java.util.*" pageEncoding="GB18030"%
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
%@page import="java.net.URLDecoder"%
html
head
titleajax deal/title
meta http-equiv="pragma" content="no-cache"
meta http-equiv="cache-control" content="no-cache"
meta http-equiv="expires" content="0"
/head
body
%
//遍历输出参数内容。
for (Enumeration e = request.getParameterNames(); e.hasMoreElements();) {
    String h = (String)e.nextElement();
    String v = request.getParameter(h);
    String mm = java.net.URLDecoder.decode(v, "UTF-8");
    System.out.println("请求参数: " + h + " = " + mm);
}
%
/body
/html

分析:当调用request.getParameter()函数时,会自动进行一次URI的解码过程,调用时内置的解码过程会导致乱码出现。而URI编码两次后,request.getParameter()函数得到的是原信息URI编码一次的内容。再用可控的解码函数 java.net.URLDecoder.decode()就可解出原始的正确的信息。

对于ASP,可以在客户端使用JavaScript的encodeURIComponent函数(其它编码函数可能也行,没有试)编码两次,然后ASP使用Request.Form接收后使用JavaScript的decodeURIComponent解码一次:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

初始页面内容如下(hello.asp):
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
titleAJAX提交页面/title
meta http-equiv="Content-Type" content="text/html; charset=GB2312"
script type="text/javascript"
function justdo(){
    var post = "name=" + encodeURIComponent(encodeURIComponent("王力猛"));    //两次
    var xmlObj = new ActiveXObject("Msxml2.XMLHTTP");
    var URL = "act.asp";    //文件名需要调整成测试时的相应位置
    xmlObj.open("POST",URL,true);
    xmlObj.setRequestHeader("Cache-Control","no-cache");
    xmlObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
    xmlObj.send(post);    //注意:POST方式,使用这个来发送内容
}
/script
/head
body
input type="button" value="提交" onclick="justdo()" /
/body
/html

Ajax请求处理页面(act.asp)的内容如下:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
titleajax deal/title
meta http-equiv="pragma" content="no-cache"
meta http-equiv="cache-control" content="no-cache"
meta http-equiv="expires" content="0"
/head
body
%
Dim context
context = decodeText(Request.Form("name"))
Response.Write("name=" & context)
%
/body
/html
script language="javascript" runat="server"
function decodeText(str){
    return (str == null ? "" : decodeURIComponent(str));
}
/script

展开更多 50%)
分享

猜你喜欢

解决ajax提交表单时中文乱码的问题

Web开发
解决ajax提交表单时中文乱码的问题

AJAX POST提交中文乱码解决(jsp)

Web开发
AJAX POST提交中文乱码解决(jsp)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

解决Ajax中文乱码问题

Web开发
解决Ajax中文乱码问题

php+ajax解决中文乱码问题

Web开发
php+ajax解决中文乱码问题

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

ajax中文乱码问题解决方案

Web开发
ajax中文乱码问题解决方案

ajax中文乱码解决方法

Web开发
ajax中文乱码解决方法

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Thank fate that I met with you. [感谢缘分让我和你相识过.]

Thank fate that I met with you. [感谢缘分让我和你相识过.]

如何克服对Ajax应用的阻碍

如何克服对Ajax应用的阻碍
下拉加载更多内容 ↓