随笔-86  评论-767  文章-3  trackbacks-3
Ajax开发过程中提交获取数据的乱码问题

这两天在继续我的Ajax之旅。一直在抓紧步伐。

前天试验使用Ajax提交form表单到服务器，获取form信息内容出现了乱码，一时无法解决。网上有结论说是application/x-www-form-urlencoded编码的原因，我估计也是。正在寻找解决之道。

大家一起讨论讨论。

2005-12-05 11：20 补充：
通过在后台用UTF8转码的方式可以解决中文乱码问题。这种方法针对form表单提交，编码在服务器完成。代码如下：
form.jsp： 
<%@ page contentType="text/html; charset=gb2312"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>表单提交测试</title>
<script language="javascript">
 var http_request = false;
 function send_request(url,poststr) {//初始化、指定处理函数、发送请求的函数
  http_request = false;
  //开始初始化XMLHttpRequest对象
  if(window.XMLHttpRequest) { //Mozilla 浏览器
   http_request = new XMLHttpRequest();
   if (http_request.overrideMimeType) {//设置MiME类别
    http_request.overrideMimeType('text/xml');
   }
  }
  else if (window.ActiveXObject) { // IE浏览器
   try {
    http_request = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
    try {
     http_request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
   }
  }
  if (!http_request) { // 异常，创建对象实例失败
   window.alert("不能创建XMLHttpRequest对象实例.");
   return false;
  }
  http_request.onreadystatechange = processRequest;
  // 确定发送请求的方式和URL以及是否同步执行下段代码
  http_request.open("POST", url, true);
  http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  http_request.send(poststr);
 }
 // 处理返回信息的函数
    function processRequest() {
        if (http_request.readyState == 4) { // 判断对象状态
            if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
                alert(http_request.responseText);
            } else { //页面不正常
                alert("您所请求的页面有异常。");
            }
        }
    }
 function form_submit() {
  var f = document.form1;
  var username = f.username.value;
  var password = f.password.value;
  var poststr = "";
  if(username=="") {
   window.alert("用户名不能为空。");
   f.username.focus();
   return false;
  }
  if(password=="") {
   window.alert("密码不能为空。");
   f.password.focus();
   return false;
  }
  poststr = "username="+encodeURI(f.username.value)+"&password="+f.password.value;
  send_request('form_handle.jsp',poststr);
  return false;
 }
</script>
</head>

<body>
<form name="form1" method="post" action="" onsubmit="return form_submit()">
    <table width="300" border="0" cellspacing="4" cellpadding="0" style=" font-size:12pt;">
        <tr>
            <td width="74" height="25">用户名：</td>
            <td width="220" height="25"><input name="username" type="text" id="username" size="20"></td>
        </tr>
        <tr>
            <td height="25">密码：</td>
            <td height="25"><input name="password" type="password" id="password" size="20"></td>
        </tr>
        <tr align="center">
            <td height="25" colspan="2"><input type="submit" name="Submit" value="提交"></td>
        </tr>
    </table>
</form>
</body>
</html>

form_handle.jsp：
<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
<%
String username = new String(request.getParameter("username").getBytes("ISO-8859-1"),"UTF8");
String password = request.getParameter("password");
System.out.println("用户名："+username);
System.out.println("密码："+password);
out.println(username+"|"+password);
%>

另外，有些网友反应生成包含中文内容的XML文档返回到客户端也会出现乱码问题。建议将XML文档的编码方式改成UTF8试试看。

期待大家的反馈。

posted on 2005-12-05 10:50 eamoi 阅读(19627) 评论(28)  编辑  收藏 所属分类: AJAX

评论:
# re: Ajax开发过程中提交获取数据的乱码问题 2005-12-06 17:53 | emu
老问题了，最简单的方法是，全部escape后发送。取回后unescape，绝对没有编码问题。如果需要在服务器端escape/unescape可以看看
http://www.blogjava.net/emu/articles/4773.html
这个帖子的初衷就是为了解决xml的问题的。上次google东亚大赛还考了一道类似的题目，我直接从这上面copy的代码交上去的呵呵。如果用其他后台语言就要自己写了。

如果后台用GBK编码而前台用UTF-8的话，可以在直接后台转码，如果要在前台转码就要用到vbscript了：
<SCRIPT LANGUAGE="vbScript">
<!--
Function URLEncoding(vstrIn)
strReturn = ""
For i = 1 To Len(vstrIn)
ThisChr = Mid(vStrIn,i,1)
If Abs(Asc(ThisChr)) < &HFF Then
strReturn = strReturn & ThisChr
Else
innerCode = Asc(ThisChr)
If innerCode < 0 Then
innerCode = innerCode + &H10000
End If
Hight8 = (innerCode And &HFF00)\ &HFF
Low8 = innerCode And &HFF
strReturn = strReturn & "%" & Hex(Hight8) & "%" & Hex(Low8)
End If
Next
URLEncoding = strReturn
End Function
//-->
</SCRIPT>

这样编码后发送出去，后台就可以按gbk编码来接收了。


  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2005-12-13 20:20 | 郭兴华
你好:我来咨询你个问题:
我想作个学生信息管理系统吧!!
在网页上,姓名录入时,我想出现"google suggest"的效果,即录入"张",马上下面可以出现一个"层",将其姓所有姓"张"的显示出.
这其中的主要功能我已实现.主要用了以下几方面知识:
1 ajax不提交网页,可以更新数据.使用httprequest.open("GET","***.xml",true)
2 通过返回xml文档,然后使用getElementsByTagName解析xml文档.

但是我现在的问题是,我的服务器端所有学生信息都存放在*.mdb中(并且我打算使用mdb,因为我觉的我比较顺手),我想根据客户端姓名文本框中录入的姓,向服务器端发送请求.可以实现:
1 使用post发送请求,.open("POST",****?姓,true)
2 服务器可以根据"姓",从服务器的mdb数据库中查出所有姓"张"的来
3 将所有"姓张"的姓名生成形如<name>张三</name>....的xml文档


请问:
1 服务器端怎么样可以生成xmldoc文档,然后transform(xmldoc)传给客户端. 客户端可以使用httpresponse.responseXML返回数据,再利用getElementByTagName来解析.
2 你能告诉我服务器端程序代如何写吗??
3 你能告诉我服务器端使用的什么技术吗？？还需要java2.0？ tomcat？servlet??
3 我的机器是winxp IIS ,我的机器还需要安装什么呢？？？

期待老师的指教！！！！




  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2005-12-14 09:28 | eamoi
回答如下：
1、服务器端返回XML：
使用post发送请求,.open("POST",****?姓,true) 是可行的办法。open的URL地址可以是各种各样的后台程序，比如ASP、JSP等。URL地址格式为**.asp?姓=..。只是在open所指向的后台程序文件中，要输出xml文档。比如，ASP中，采用Response.write方式打印出一个XML文档；JSP中采用out.pringln的方式打印出一个XML文档。AJAX会自动返回。返回到客户端，用JS操纵DOM更新页面内容就可以了。这个过程跟数据库类型无关，无非是一个取出数据的过程而已。

2、服务器端代码如何写：
根据你所使用的技术，到GOOGLE搜索一下，关键词“** 生成XML文档”。比如：“JSP 生成XML文档”。应该可以查找到生成XML文档的方法。这点我不赘述了。

3、服务器端需要什么技术：
Ajax只是一个改善视图层和提高数据交互效率的方法而已，理论上适用几乎全部的后台程序，至少目前已经支持JSP/ASP/.NET/CGI等，我想编程对你应该不是问题。

4、具备IIS的机器还需要安装什么：
适用IIS服务器，后台程序应该是采用ASP或者.NET技术吧。Ajax是一个无需插件的技术，它只是将目前几种技术Javascript、XML和XSTL、DOM、XMLHttpRequest综合起来使用，这些技术都得到了主流Web服务器和浏览器的支持，毋庸担心。所以结论是：不用再安装其他的软件或者插件了。

最后，祝顺利。  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2005-12-14 09:32 | eamoi
我想出现"google suggest"的效果,即录入"张",马上下面可以出现一个"层",将其姓所有姓"张"的显示出.
~~~~~~~~~~~~~这个应该就是数据自动匹配功能。实现起来难度应该不大。在几个主流的Ajax框建中已经都可以看到这个支持了，比如Ajax JSP Tag Library。  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2005-12-14 11:52 | 郭兴华
你好:

你写的最上面那个例子.我原样复制下来form.jsp form_handle.jsp复制下来的.怎么调试出现"您所请求的页面有异常"
我的机器是winxp iis 其他没装.(tomcat java2sdk也没装)??是什么原因??  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2005-12-14 12:16 | 郭兴华
你能到:www.javascript.com.cn论坛下的"Ajax（javascript、XMLHttpRequest、DOM......） "论坛下看一看主题为"Ajax2"的那个贴字,给回答一下吗??
那里面还有你的书呢!!  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2005-12-15 21:57 | llinzzi
回答郭兴华朋友
jsp是需要服务端运行环境的,请安装tomcat.  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2005-12-17 13:13 | 郭兴华
关干利用dom操作xml的问题:
我在JBuild4.0,(tomcat5.0)已将C:\Tomcat 5.0\common\endorsed\xml-apis.jar导入,然后编写document1.java

package com.deitel.advjhtp1.servlets;
import javax.xml.parsers.*;
import javax.xml.transform.*;

import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.parsers.DocumentBuilder;

import javax.xml.transform.dom.*;
import javax.xml.parsers.*;


public class document1 {

public document1() {
Document doc;
Document doc1=DocumentBuilderFactory.newInstance().newDocumentBuilder().newDocument();
DOMSource doms=new DOMSoruce(doc);
}
}


编译时出现如下错误:

[Document doc;这句话出现的错误:]

"document1.java": Error #: 300 : class Document not found in class com.deitel.advjhtp1.servlets.document1 at line 15, column 3

[这句话: Document doc1=DocumentBuilderFactory.newInstance().newDocumentBuilder().newDocument();出现的以下两个错误]

"document1.java": Error #: 300 : class Document not found in class com.deitel.advjhtp1.servlets.document1 at line 16, column 3
"document1.java": Error #: 360 : unreported exception: javax.xml.parsers.ParserConfigurationException; must be caught or declared to be thrown at line 16, column 72

[ DOMSource doms=new DOMSoruce(doc);这句话出现的以下错误:]

"document1.java": Error #: 300 : class DOMSoruce not found in class com.deitel.advjhtp1.servlets.document1 at line 17, column 22


请高手指教!!!  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2005-12-17 14:12 | 郭兴华
import javax.xml.transform.dom.DOMSource;
import javax.swing.text.Document;
加上上面两句话,就是document doc;不出错,其他完全相同.  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2005-12-18 13:25 | 郭兴华
package com.deitel.advjhtp1.servlets;
import org.w3c.dom.*;
import javax.xml.parsers.*;
import org.xml.sax.*;

public class WelcomeServlet2 {

public WelcomeServlet2() {
}
public static void main(String[] args) {

Document doc;
Element root;
DocumentBuilderFactory factory=DocumentBuilderFactory.newInstance();
factory.setValidating(true);
try{
DocumentBuilder builder=factory.newDocumentBuilder();
doc=builder.newDocument();
}catch(ParserConfigurationException pce)
{
pce.printStackTrace();
}

root=doc.createElement("result");

}
}

还是提示: root=doc.createElement("result");这句话错误
"WelcomeServlet2.java": Error #: 553 : variable doc might not have been initialized at line 24, column 10
原帖来自于网易社区:http://p5.club.163.com/viewArticleByWWW.m?boardId=java&articleId=java_107a8e37bc7341e   回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2005-12-25 08:29 | 郭兴华
利用jdbc.odbc访问Access数据库.mdb,怎么写到Class.for()时，
打上class.时，后面提示中没有显示for呢，请高手指教！！


用的是Jbuilder4.0,
我的系统是jbuilder4.0 我已加上了
import java.sql.*;
import java.lang.class.*;

我怀疑是不是我的什么.jar没有config jdk??
请高手指教!!   回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2006-01-11 18:09 | 霜
在asp中解决乱码问题只需要在服务器端加上<%Response.ContentType = "text/html;charset=GB2312"%>就可以了，十分简单！  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2006-01-17 11:17 | suyejun
我前台页面用的是GBK，为什么后台反而要用new String(req.getParameter("username").getBytes("ISO-8859-1"),"UTF-8")进行转码呢？我对编码不太清楚，能不能给点指教，谢谢～
ps:你的教程我很喜欢  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2006-01-23 05:48 | 新
解决AJAX的乱码，可以用 escape()函数的呀。

var url="aaa.aspx?value=" + escape(val) ;
//我在.Net下没有发现什么问题，插入数据库里的值没有中文乱吗问题  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2006-02-07 12:29 | haiter
我也遇到"取数据的乱码问题"
不知怎样解决?  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2006-02-15 21:41 | sea135
我在ajax的responseText接收的是乱码

form_handle.jsp 中
out.println(username+"|"+password);输出的是UTF-8的字符串
但是：
out.println("密码错误")
这样在responseText接收的不会是乱码？

  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2006-02-15 21:50 | sea135
我的情况还有些不同
我之前调用了request.setRequestEncode("GBK");
之后我在action中
out.print("成功");
这时在responseText接收的是乱码！
我试图转换"成功"这个字符串的编码但是没用

希望各位能帮忙解答，不胜感激  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2006-02-27 10:45 | javadolt
我escape后传过去的参数为NULL，不进行escape传过去的英文正常，中午乱码。我是用 http_request.send(data);传送数据过去的。
如果直接在url后面加?test=中文，这个没问题，把ISO-8859-1转为GBK就可以了。  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2006-04-08 00:39 | errorfun
用过滤器不行吗？？  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2006-04-26 09:56 | HH
JavaScript:
assertEquals("%E7%9A%84", encodeURI("的"));

Java:
assertEquals("\u7684", "的");
assertEquals("的", URLDecoder.decode("%B5%C4", "GB2312"));
assertEquals("的", URLDecoder.decode("%E7%9A%84", "UTF-8"));

参考：Java中文乱码问题大全
  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2006-05-18 06:56 | java中
hh是什么意思说得详细些好吗？  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2006-06-25 08:28 | betty
@郭兴华
应该加上import org.w3c.dom.*;
好像是。  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2006-06-29 15:31 | luchunwei
谢谢，这个方法不错。  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2006-09-05 10:26 | fdsfds
谢谢，
String ss=new String(request.getParameter("value").getBytes("ISO-8859-1"),"UTF8");
System.err.println(ss);
我正头大找这个解决问题呢。太谢谢了
但在servlet中好像：request.setCharacterEncoding("UTF8");
String ss=request.getParameter("value");
System.err.println("post pd : "+ss);
就行了。  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2006-09-06 15:32 | 乌鸦在黑夜里飞
实际上所有的问题都来自编码的不统一：
1、HTTP/POST方式在缺省情况下，采用的是“x-www-form-urlencoded”进行编码，它和JavaScript里面的encodeURI所起的作用是一样的；
2、经过这样编码的内容，到达后台时，其中的字符都是UTF-8编码格式的；
3、如果你的Servlet/JSP指定输出使用的Content-Type是UTF-8，恭喜你，你不需要对这些Parameters进行特别的编码、解码操作，它一定是正常的；
4、否则你需要对这些parameter进行解、编码操作，例如你的页面是GBK编码，那么你需要这么写：
String sPara = new String(request.getParamter("test").getBytes("iso-8859-1"),"GBK");
采用gb2312编码的也可以采用GBK编码；
5、如果你是在eclipse中进行工作，请注意你的Servlet和JSP文件的属性，其中的编码必须和content-type中设置的一样，否则javac会对你的文件进行错误的编码，这时候的字节码文件本身的字符串就是错误的，输出也不顶用；
6、最后做一个总结：
6.1、servlet/JSP文件本身的编码必须和content-type输出的一致，否则需要加入额外的编码、解码步骤；
6.2、HTTP/POST方式和encodeURI方式传入的编码都是UTF-8的；
6.3、普通的window.open(...)，也就是HTTP/GET方式，其传入的编码是和运行script的页面编码一致的；
6.4、后台解码必须通过iso-8859-1进行解码，再使用你的目标编码进行编码；
6.5、所有的问题基本上可以得到解决。  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2007-05-31 14:40 | itblog
我想问一下eamoi老师，这个问题最后的解决办法，因为我现在遇到了同样的问题!谢谢!  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2007-06-11 10:57 | purple.calm
do jsp have convert methods? just like in php mb_convert_encoding()  回复  更多评论
  
# re: Ajax开发过程中提交获取数据的乱码问题 2007-06-12 15:22 | 风的语言
我用ajax取到的文本框值提交到后台后,文本框中的格式全没了,只提交了纯数据过去,也就是说回车换行这些都没有了,有遇到过相同问题的吗,请问怎么解决  回复  更多评论
  

只有注册用户登录后才能发表评论。
网站导航:
 
Powered by: 博客园 模板提供：沪江博客 Copyright ©2024 eamoi