热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

解决ajax提交表单出现乱码的问题

问题在现有主站中使用的是是GBK编码的,当表单使用formsubmit方式递交的话没有问题,服务器端能够正确识别字符编码。但是,当客户端使用ajax的方式递交表单的话,服务器端识别客户端递交的表单的内容,当内容中有中文字符的话就会出现乱码现象。原因分析
问题

在现有主站中使用的是是GBK编码的,当表单使用form submit方式递交的话没有问题,服务器端能够正确识别字符编码。但是,当客户端使用ajax的方式递交表单的话,服务器端识别客户端递交的表单的内容,当内容中有中文字符的话就会出现乱码现象。

原因分析

究其原因,其实很简单,使用ajax方式提交的表单是用utf-8编码来提交的,这样服务器端在接收客户端表单的内容的时候还是按照GBK或其他编码方式来解析的,自然解析出来的内容会出现乱码了。

表单内容可以通过GET或POST方式发送,但是用这两种方式有几个不同之处,对“你好”调用Javascript函数encodeURI()解析之后得到的字符串为“%E4%BD%A0%E5%A5%BD”,需要注意的一点,encodeURI()这个函数只会对字符串进行utf8编码。当客户端把“%E4%BD%A0%E5%A5%BD”这段字符串通过GET或者POST方式发送会发生什么事。

1.GET方式

当用get方式提交表单,在服务端的tomcat服务器中会用一个connector来自动解析编码之后字符串,以下是connector的配置节点:


 maxHttpHeaderSize="8192"
 maxThreads="150" minSpareThreads="25"
 maxSpareThreads="75"
 enableLookups="false" redirectPort="8443"
 acceptCount="100"
 cOnnectionTimeout="20000" disableUploadTimeout="true"
 URIEncoding="GBK" />


上面配置中有一个属性URIEncoding="GBK"的作用是,当客户端get发送信息中有encode模式的字符串就是用gbk来decode它。和遗憾,主站服务器中的URIEncoding属性是gbk不能变了,而客户端encodeURI()只能编码UTF-8的字符。所以,用这种方式发送的字符串在服务器端就会出现乱码现象。

2. POST方式

当客户端发送“%E4%BD%A0%E5%A5%BD”字符串时,是通过YAHOO.util.Connect这个控件来发送的,如果客户端能正常地发送“%E4%BD%A0%E5%A5%BD”这个字符串,服务端接收到之后并不会做额外的转义,但是YAHOO.util.Connect 将encode之后字符串传给Connect控件之后,这个控件在内部会将encode之后的字符再decode之后再发送,因为发送的是utf-8格式的内容,所以服务器端就会出现乱码。

解决办法

尝试了以上get和post方式之后,觉得在请求的URL上发送数据乱码问题的解决方案比较麻烦,况且,http协议中已经明确说了get和post的区别,get是从服务器端拿一些东西,而post是向服务器传输东西。get方式向服务器端发送数据的数据量有限,且get传输也是不安全的。

那么我们只能来解决YAHOO.util.Connect这个控件发送请求之前自动转义字符的问题。以下是Connect发送异步请求的一段代码


var postData="city="+from["city"].value
+"&areainfo="+from["areainfo"].value +"&store.name="+encodeURI(encodeURI(from["store.name"].value))
YAHOO.util.Connect.asyncRequest('POST',formObject.action, callback,postData);


如上所示,可以调用两遍encodeURI,

例如:“你好”

·调用一遍encodeURI:“%E4%BD%A0%E5%A5%BD”

·调用两遍encodeURI: “%25E4%25BD%25A0%25E5%25A5%25BD”

当把第二遍encode的结果传给YAHOO.util.Connect控件,控件会decode成第一遍调用encodeURI的输出结果,这样就能把“你好”的utf-8编码传输到服务器上去了。

在服务器的webwork的action或者interceptor中先对传输上来的内容做一次decode,注意一定要用utf-8解码。示例


try {
HttpServletRequest request
 = ServletActionContext.getRequest();
String storeName = request.getParameter("store.name");
this.getStore().setName(
  URLDecoder.decode(StringUtils.trimToEmpty(storeName)
    ,"UTF-8"));
this.getStore().setAddress(
 URLDecoder.decode(
  StringUtils.trimToEmpty(request
   .getParameter("store.address")), "UTF-8"));
} catch (Exception e) {
   throw new RuntimeException(e);
}


总结

通过以上提到的在客户端中将用ajax递交的字段内容两次调用encodeURI的方法,能够很好地解决服务器端使用非utf8的而造成的乱码问题。

出现这样的问题,主要原因是客户端Javascript的编码只支持utf编码,而服务器端能够按照架构师的需要定义各种编码,口碑现在服务器端使用的是GBK的编码格式,但是随着业务扩展,某些应用模块使用了utf的编码格式,这样在服务器端由于编码不统一,在做两个不同编码的格式系统的产品的时候给程序员带来了无尽的烦恼。例如,sa同时经常会问这样的问题,调用数据库的应用有用gbk编码的,也有用utf8编码的,那么数据库应该用啥编码的呢?

最近口碑的工程师们为现在一直为到底是用gbk编码还是用UTF8编码在进行讨论,我们现在讨论的焦点似乎是哪个编码更加好。但是我觉得,就编码来说扩展性当然是utf8,如果以后口碑要打入国际市场,到时候要出一个阿拉伯语版本的应用时候就可以轻松搞定了。我倒是觉得讨论那个编码好没有什么实际意义,关键是如何解决现在编码混乱的局面,如何让编码统一,这个才是我们应该关注的焦点。这样在将来的项目中我们的工程师不再会因为编码问题而头痛了。

所以我的个人观点是,当你开始搭建一个新的系统的时候,一开始就把utf-8作为你的项目中使用的编码格式,并且要把这个成为你项目的规约,写进你们项目组的“宪法”中去。这样,在以后会为你免去很多不必要的麻烦。


推荐阅读
  • Tomcat安装与配置教程及常见问题解决方法
    本文介绍了Tomcat的安装与配置教程,包括jdk版本的选择、域名解析、war文件的部署和访问、常见问题的解决方法等。其中涉及到的问题包括403问题、数据库连接问题、1130错误、2003错误、Java Runtime版本不兼容问题以及502错误等。最后还提到了项目的前后端连接代码的配置。通过本文的指导,读者可以顺利完成Tomcat的安装与配置,并解决常见的问题。 ... [详细]
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • Centos7.6安装Gitlab教程及注意事项
    本文介绍了在Centos7.6系统下安装Gitlab的详细教程,并提供了一些注意事项。教程包括查看系统版本、安装必要的软件包、配置防火墙等步骤。同时,还强调了使用阿里云服务器时的特殊配置需求,以及建议至少4GB的可用RAM来运行GitLab。 ... [详细]
  • 禁止程序接收鼠标事件的工具_VNC Viewer for Mac(远程桌面工具)免费版
    VNCViewerforMac是一款运行在Mac平台上的远程桌面工具,vncviewermac版可以帮助您使用Mac的键盘和鼠标来控制远程计算机,操作简 ... [详细]
  • 本文详细介绍了云服务器API接口的概念和作用,以及如何使用API接口管理云上资源和开发应用程序。通过创建实例API、调整实例配置API、关闭实例API和退还实例API等功能,可以实现云服务器的创建、配置修改和销毁等操作。对于想要学习云服务器API接口的人来说,本文提供了详细的入门指南和使用方法。如果想进一步了解相关知识或阅读更多相关文章,请关注编程笔记行业资讯频道。 ... [详细]
  • 如何用UE4制作2D游戏文档——计算篇
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了如何用UE4制作2D游戏文档——计算篇相关的知识,希望对你有一定的参考价值。 ... [详细]
  • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
  • 本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念,以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器,包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实,适合初学者了解Tomcat的基础知识。 ... [详细]
  • 如何在服务器主机上实现文件共享的方法和工具
    本文介绍了在服务器主机上实现文件共享的方法和工具,包括Linux主机和Windows主机的文件传输方式,Web运维和FTP/SFTP客户端运维两种方式,以及使用WinSCP工具将文件上传至Linux云服务器的操作方法。此外,还介绍了在迁移过程中需要安装迁移Agent并输入目的端服务器所在华为云的AK/SK,以及主机迁移服务会收集的源端服务器信息。 ... [详细]
  • 本文介绍了一种处理AJAX操作授权过期的全局方式,以解决Asp.net MVC中Session过期异常的问题。同时还介绍了基于WebImage的图片上传工具类。详细内容请参考链接:https://www.cnblogs.com/starluck/p/8284949.html ... [详细]
  • 如何提高PHP编程技能及推荐高级教程
    本文介绍了如何提高PHP编程技能的方法,推荐了一些高级教程。学习任何一种编程语言都需要长期的坚持和不懈的努力,本文提醒读者要有足够的耐心和时间投入。通过实践操作学习,可以更好地理解和掌握PHP语言的特异性,特别是单引号和双引号的用法。同时,本文也指出了只走马观花看整体而不深入学习的学习方式无法真正掌握这门语言,建议读者要从整体来考虑局部,培养大局观。最后,本文提醒读者完成一个像模像样的网站需要付出更多的努力和实践。 ... [详细]
  • GPT-3发布,动动手指就能自动生成代码的神器来了!
    近日,OpenAI发布了最新的NLP模型GPT-3,该模型在GitHub趋势榜上名列前茅。GPT-3使用的数据集容量达到45TB,参数个数高达1750亿,训练好的模型需要700G的硬盘空间来存储。一位开发者根据GPT-3模型上线了一个名为debuid的网站,用户只需用英语描述需求,前端代码就能自动生成。这个神奇的功能让许多程序员感到惊讶。去年,OpenAI在与世界冠军OG战队的表演赛中展示了他们的强化学习模型,在限定条件下以2:0完胜人类冠军。 ... [详细]
  • Servlet多用户登录时HttpSession会话信息覆盖问题的解决方案
    本文讨论了在Servlet多用户登录时可能出现的HttpSession会话信息覆盖问题,并提供了解决方案。通过分析JSESSIONID的作用机制和编码方式,我们可以得出每个HttpSession对象都是通过客户端发送的唯一JSESSIONID来识别的,因此无需担心会话信息被覆盖的问题。需要注意的是,本文讨论的是多个客户端级别上的多用户登录,而非同一个浏览器级别上的多用户登录。 ... [详细]
  • 面试经验分享:华为面试四轮电话面试、一轮笔试、一轮主管视频面试、一轮hr视频面试
    最近有朋友去华为面试,面试经历包括四轮电话面试、一轮笔试、一轮主管视频面试、一轮hr视频面试。80%的人都在第一轮电话面试中失败,因为缺乏基础知识。面试问题涉及 ... [详细]
  • 在IDEA中运行CAS服务器的配置方法
    本文介绍了在IDEA中运行CAS服务器的配置方法,包括下载CAS模板Overlay Template、解压并添加项目、配置tomcat、运行CAS服务器等步骤。通过本文的指导,读者可以轻松在IDEA中进行CAS服务器的运行和配置。 ... [详细]
author-avatar
逍遥子2502897751
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有