Ajax通过POST方法发送中文信息乱码解决

最新推荐文章于 2023-02-28 09:26:53 发布

iteye_9085

最新推荐文章于 2023-02-28 09:26:53 发布

阅读量166

点赞数

分类专栏：技术实践文章标签： Ajax Servlet Firefox Opera HTML

技术实践专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种解决Ajax请求中中文字符乱码的方法。通过客户端对提交数据进行两次URI编码，并在服务器端进行一次UTF-8解码，成功解决了中文乱码的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发项目用Ajax的Post方法提交信息到请求的servlet，输出遇到中文乱码，纠结了好几天，总结了网络上很多高手的心得，用了两步解决了乱码：

在JS端，对提交的字符串进行两次编码：

<%@page contentType="text/html" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>JSP Page</title>

        <script type="text/javascript">
            var req;
            function validate() {
                //获取表单提交的内容
                var idField = document.getElementById("userName").value;
				//要发送的字符串数据
                var content = "id=hello&message=" + idField + "&say=我是帅哥";
                
				//重点：对content含中文字符的字符串进行两次编码
                content = encodeURI(content);
                content = encodeURI(content);
                var url = "validate.do";
                //创建一个XMLHttpRequest对象req
                if(window.XMLHttpRequest) {
                    //IE7, Firefox, Opera支持
                    req = new XMLHttpRequest();
                }else if(window.ActiveXObject) {
                    //IE5,IE6支持
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                }

                req.open("post", url, true);
                req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                req.onreadystatechange = callback;
                //send函数发送请求，参数
                req.send(content);
            }

            function callback() {
                //alert(req.readyState);
                //alert(req.status);
                if(req.readyState == 4 && req.status == 200) {
                    //alert(req.status);
                    //alert(req.responseText);
                    var check = req.responseText;
                    show (check);
                }
            }

            function show(str) {
                document.getElementById("info").innerHTML = str;
            }
        </script>
    </head>
    <body>
        <h1>Test Ajax</h1><p>
        <form action="" method="get" name="form">
            <br>
            输入用户名：
            <input type="text" size="10" maxlength="8" id="userName" name="name" onblur="validate()">
            <span id="info"></span>
            <br>
            输入商品名：
            <input type="submit" name="refer" >
        </form>
    </body>
</html>

在servlet端，对接收的数据的进行一次解码：

package com.model;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Enumeration;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.net.URLDecoder;

/**
 *
 * @author Gavin
 */
public class DoAjaxServlet extends HttpServlet {
   
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/html;charset=gbk");
        request.setCharacterEncoding("gbk");
        PrintWriter out = response.getWriter();
        try {
            response.setHeader("Cache-Control", "no-store");
            response.setHeader("Pragma", "no-cache");
            response.setDateHeader("Expires", 0);
			//这里有个小问题：如果写成String put = null;将会输出一个null后面再加上增加的字符
            String put = "";
            for(Enumeration<String> e = request.getParameterNames(); e.hasMoreElements(); ) {
                String h = (String) e.nextElement();
                String c = (String)request.getParameter(h);
                put += c;
                
            }
			//重点在这里，对接受到的信息进行解码
            String putDecoded = java.net.URLDecoder.decode(put,"utf-8");
            System.out.println(pute);
            out.write("message is:" + putDecoded);
        } finally { 
            out.close();
        }
    } 

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    } 

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    }

    @Override
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>

}