AJAX乱码问题解析和解决方案------AJAX

旧约Alatus

已于 2023-11-16 00:00:10 修改

阅读量417

点赞数 1

分类专栏： AJAX 计算机网络 JAVA 文章标签： javascript 前端 json ajax java-ee java servlet

于 2023-11-15 16:23:01 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134423164

版权

JAVA 同时被 3 个专栏收录

505 篇文章 2 订阅

订阅专栏

计算机网络

129 篇文章 0 订阅

订阅专栏

AJAX

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" id="doSome" value="GET测试乱码问题">
    <br>
    <input type="button" value="POST请求测试" id="POST">
<br>
<input type="text" id="Text">
    <div id="MyDiv"></div>
    <script type="text/javascript">
        //页面加载完成后给ID是helloBtn绑定单机事件
        //这个function就是一个回调函数,在window.onload事件执行
        window.onload = function()
        {
            //给这个按钮绑定事件
            var elementById = document.getElementById("helloBtn");
            //给这个元素绑定事件
            elementById.onclick = function()
            {
                //这个回调函数的this就是事件源
                alert(this.value);
            }
        }
    </script>
    <script>
        window.onload = function()
        {
            document.getElementById("doSome").onclick = function()
            {
                var xhr = new XMLHttpRequest();
                var username = document.getElementById("Text").value;
                xhr.onreadystatechange = function()
                {
                    if(xhr.readyState === 4)
                    {
                        if(xhr.status === 200)
                        {
                            document.getElementById("MyDiv").innerText = xhr.responseText;
                        }
                        else
                        {
                            alert(xhr.status);
                        }
                    }
                }
                xhr.open("GET","/ajax/ajaxTest1?t="+new Date().getTime()+"&username="+username,true);
                xhr.send();
            }
            document.getElementById("POST").onclick = function()
            {
                var xhr = new XMLHttpRequest();
                var username = document.getElementById("Text").value;
                xhr.onreadystatechange = function()
                {
                    if(xhr.readyState === 4)
                    {
                        if(xhr.status === 200)
                        {
                            document.getElementById("MyDiv").innerText = xhr.responseText;
                        }
                        else
                        {
                            alert(xhr.status);
                        }
                    }
                }
                xhr.open("POST","/ajax/ajaxTest1",true);
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xhr.send("username=" + username);
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" id="doSome" value="GET测试乱码问题">
    <br>
    <input type="button" value="POST请求测试" id="POST">
<br>
<input type="text" id="Text">
    <div id="MyDiv"></div>
    <script type="text/javascript">
        //页面加载完成后给ID是helloBtn绑定单机事件
        //这个function就是一个回调函数,在window.onload事件执行
        window.onload = function()
        {
            //给这个按钮绑定事件
            var elementById = document.getElementById("helloBtn");
            //给这个元素绑定事件
            elementById.onclick = function()
            {
                //这个回调函数的this就是事件源
                alert(this.value);
            }
        }
    </script>
    <script>
        window.onload = function()
        {
            document.getElementById("doSome").onclick = function()
            {
                var xhr = new XMLHttpRequest();
                var username = document.getElementById("Text").value;
                xhr.onreadystatechange = function()
                {
                    if(xhr.readyState === 4)
                    {
                        if(xhr.status === 200)
                        {
                            document.getElementById("MyDiv").innerText = xhr.responseText;
                        }
                        else
                        {
                            alert(xhr.status);
                        }
                    }
                }
                xhr.open("GET","/ajax/ajaxTest1?t="+new Date().getTime()+"&username="+username,true);
                xhr.send();
            }
            document.getElementById("POST").onclick = function()
            {
                var xhr = new XMLHttpRequest();
                var username = document.getElementById("Text").value;
                xhr.onreadystatechange = function()
                {
                    if(xhr.readyState === 4)
                    {
                        if(xhr.status === 200)
                        {
                            document.getElementById("MyDiv").innerText = xhr.responseText;
                        }
                        else
                        {
                            alert(xhr.status);
                        }
                    }
                }
                xhr.open("POST","/ajax/ajaxTest1",true);
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                xhr.send("username=" + username);
            }
        }
    </script>
</body>
</html>

package com.bjpowernode.AJAX.servlet;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/ajaxTest1")
public class ajaxTest1 extends HttpServlet
{
    //对于TOMCAT10来说,AJAX不会出现乱码问题,但是还是最好对其进行设置
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        //对于TOMCAT10来说,AJAX不会出现乱码问题,但是还是最好对其进行设置
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        String username = request.getParameter("username");
        System.out.println(username);
        PrintWriter out = response.getWriter();
        out.println(username);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        //对于TOMCAT10来说,AJAX不会出现乱码问题,但是还是最好对其进行设置
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        String username = request.getParameter("username");
        System.out.println(username);
        PrintWriter out = response.getWriter();
        out.println(username);
    }
}

package com.bjpowernode.AJAX.servlet;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/ajaxTest1")
public class ajaxTest1 extends HttpServlet
{
    //对于TOMCAT10来说,AJAX不会出现乱码问题,但是还是最好对其进行设置
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        //对于TOMCAT10来说,AJAX不会出现乱码问题,但是还是最好对其进行设置
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        String username = request.getParameter("username");
        System.out.println(username);
        PrintWriter out = response.getWriter();
        out.println(username);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        //对于TOMCAT10来说,AJAX不会出现乱码问题,但是还是最好对其进行设置
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        String username = request.getParameter("username");
        System.out.println(username);
        PrintWriter out = response.getWriter();
        out.println(username);
    }
}