首页 > 其他分享 >Ajax表单提交数据出现乱码和解决办法

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

时间:2023-06-08 21:04:28浏览次数:40  
标签:表单 乱码 Ajax 提交 var POST xmlObj post


> > 更多精彩技术文章>
//要传递的参数
   var queryString = "firstName=" + firstName + "&lastName=" + lastName
                          + "&birthday=" + birthday;    function  

    1. //GET方式提交    
    2. doRequestUsingGET() {    
    3.          createXMLHttpRequest();    
    4. queryString + "&timeStamp="   
    5.                            + new Date().getTime();    
    6.          xmlHttp.onreadystatechange = handleStateChange;    
    7.          xmlHttp.open("GET", url, true);    
    8.          xmlHttp.send(null);    
    9. }    
    10.    
    11. //POST方式提交    
    12. function doRequestUsingPOST() {    
    13.          createXMLHttpRequest();    
    14.         var url = "GetAndPostExample?timeStamp=" + new Date().getTime();    
    15.          xmlHttp.open("POST", url, true);    
    16.          xmlHttp.onreadystatechange = handleStateChange;    
    17.          xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");    
    18. queryString);    
    19. }



    当在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或者其它中文编码的话就会乱码。

    使 用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>
    <title>AJAX提交页面</title>
    <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
    <script type="text/javascript">
    function justdo(){
        var post = "name=王力猛&[email protected]&bokee=http://wallimn.bokee.com";
        post = encodeURI(post);
        post = encodeURI(post);    //两次,很关键
        var xmlObj = new ActiveXObject("Msxml2.XMLHTTP");
        var URL = "act.jsp";    //文件名需要调整成测试时的相应位置
        xmlObj.open("POST","http://www.66of.com",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="提交" οnclick="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>
    <title>ajax 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解码一次:

    初始页面内容如下(hello.asp):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>AJAX提交页面</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="提交" οnclick="justdo()" />
    </body>
    </html>
    
    Ajax请求处理页面(act.asp)的内容如下:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>ajax 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>

    标签:表单,乱码,Ajax,提交,var,POST,xmlObj,post
    From: https://blog.51cto.com/u_16065168/6443263

    相关文章

    • 中文乱码解决(多种方法)(转)
      使用tomcat时,相信大家都回遇到中文乱码的问题,具体表现为通过表单取得的中文数据为乱码。一、初级解决方法通过一番检索后,许多人采用了如下办法,首先对取得字符串按照iso8859-1进行解码转换,然后再按照gb2312进行编码,最后得到正确的内容。示例代码如下:Stringpara=newString......
    • AJAX+servlet实例入门
      这些时间,瞎子也看得见,AJAX正大踏步的朝我们走来。不管我们是拥护也好,反对也罢,还是视而不见,AJAX像一阵潮流,席转了我们所有的人。关于AJAX的定义也好,大话也好,早有人在网上发表了汗牛充栋的文字,在这里我也不想照本宣科。只想说说我感觉到的一些优点,对于不对,大家也可以和我讨论......
    • Java 表单注册常用正则表达式验证工具类
      http://springmvc-springdata.iteye.com/blog/2114555Java表单注册常用正则表达式验证工具类,常用正则表达式大集合。1.电话号码2.邮编3.QQ4.E-mail5.手机号码6.URL7.是否为数字8.是否为中文9.身份证10.域名11.IP。。。。常用验证应有尽有!这的确是您从事web开发......
    • [转]前端-WebAPI接口-FormData对象的使用(模拟表单用于发送数据及上传文件)
      一、概述FormData对象的使用:用一些键值对来模拟一系列表单控件:即把form中所有的元素的name与value组成一个queryString。异步上传二进制文件。二、使用创建一个空对象实例。 javascript复制代码varmyform=newFormData();使用已有的表单来初始化 ht......
    • 原生AJAX案例浏览器报错:Cross origin requests are only supported for protocol
      报错信息如下:代码如下:<!DOCTYPEhtml><html><body><divid="demo"><h1>XMLHttpRequest对象</h1><buttontype="button"onclick="loadDoc()">更改内容</button></div><script>fu......
    • Window下ES启动控制台中文乱码问题
      找到es安装目录config下的jvm.options文件,在空白处加上这一行:-Dfile.encoding=GBK关闭ES,重新启动程序,中文显示正常......
    • 深入了解 HTTP 请求和响应、表单处理和验证、URL 路由和重定向、Web 服务和 API 开发,
      在Web开发中,了解HTTP请求和响应、表单处理和验证、URL路由和重定向、Web服务和API开发,以及PHP模板引擎和视图是非常重要的。本文将深入探讨这些概念,并提供相关的代码示例。1.HTTP请求和响应HTTP(超文本传输协议)是用于在客户端和服务器之间传输数据的协议。在Web开发中......
    • 想要提高办公效率,可以采用表单自定义工具
      当前,随着社会的进步和科技的发展,表单自定义工具逐渐在现代化办公场所中得到重用和喜爱。因为它的灵活、简便、易操作等优势特性,使得其突破了传统表单制作工具的局限,成为广大中大型企业实现流程化管理和数字化进程的得力助手。如果您也想打破传统表单限制,实现提质增效的办公目的,不......
    • 一份配置轻松搞定表单渲染,配置式表单渲染器在袋鼠云的实现思路与实践
      前段时间,袋鼠云离线开发产品接到改造数据同步表单的需求。一方面,数据同步模块的代码可读性和可维护性较差,导致在数据同步模块开发新功能和定位问题的效率很低。另一方面,整体规划上,希望在对接新的数据源时,可以不再关心表单渲染相关问题,从数据源中心新建数据源一直到数据源在数据同......
    • mysql select into outfile 语法 乱码问题
      一个常见的问题,mysql导出csv格式的语法,已经乱码问题:由于数据库一般默认的是UTF-8格式的字符集,而execl默认的是gbk格式的字符集,这里有两种方法解决乱码:方法一:先转出.txt格式的文件,然后选择用excel打开时,提示选择哪种编码打开,选择gbk即可select*frommobile_order_regionwhere......