AJAX学习笔记4解决乱码问题

AJAX学习笔记3练习_biubiubiu0706的博客-CSDN博客

在Tomcat10来说,AJAX GET或者POST接收响应都不存在乱码问题

对于Tomcat9来说

前端测试代码

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试AJAX乱码问题</title>
</head>
<body>
<script type="text/javascript">
    window.onload=function (){
        //GET
        document.getElementById("btn1").onclick=function(){
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function (){
                if(this.readyState==4){
                    if(this.status==200){
                        document.getElementById("mydiv").innerHTML=this.responseText
                    }else{
                        alert("请求发送失败")
                    }
                }
            }
            var username=document.getElementById("username").value
            xhr.open("get","/ajax/luanma?username="+username,true)

            xhr.send()
        }
        //POST
        document.getElementById("btn2").onclick=function(){
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function (){
                if(this.readyState==4){
                    if(this.status==200){
                        document.getElementById("mydiv").innerHTML=this.responseText
                    }else{
                        alert("请求发送失败")
                    }
                }
            }
            var username=document.getElementById("username").value
            xhr.open("post","/ajax/luanma",true)
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            xhr.send("username="+username)
        }
    }
</script>


<input type="text" id="username">
<button id="btn1">发送AJAX GET请求,测试乱码问题</button>
<button id="btn2">发送AJAX POST请求,测试乱码问题</button>

<div id="mydiv"></div>
</body>
</html>

后端测试代码

复制代码
package com.web;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * @author hrui
 * @date 2023/9/4 6:02
 */
@WebServlet("/luanma")
public class AjaxRequestLuanma extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //接收的中文会不会乱码
        String username = req.getParameter("username");
        System.out.println(username);
        //响应中文会乱码吗
        PrintWriter writer = resp.getWriter();
        writer.print("GET响应");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //接收的中文会不会乱码
        String username = req.getParameter("username");
        System.out.println(username);
        //响应中文会乱码吗
        PrintWriter writer = resp.getWriter();
        writer.print("POST响应");
    }
}

解决方式

复制代码
package com.web;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.ResultSet;

/**
 * @author hrui
 * @date 2023/9/4 6:02
 */
@WebServlet("/luanma")
public class AjaxRequestLuanma extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //接收的中文会不会乱码
        String username = req.getParameter("username");
        System.out.println(username);
        //响应中文会乱码吗
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();
        writer.print("GET响应");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //接收的中文会不会乱码
        req.setCharacterEncoding("utf-8");//解决body体乱码问题
        String username = req.getParameter("username");
        System.out.println(username);
        //响应中文会乱码吗
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter writer = resp.getWriter();
        writer.print("POST响应");
    }
}
相关推荐
hour_go19 分钟前
Linux Shell 实验一:数据采集与脚本调试错误总结
linux·笔记·bash·shell·实验报告·错误排查
励志成为美貌才华为一体的女子27 分钟前
本地用docling实现pdf转markdown操作笔记
笔记·pdf
患得患失94928 分钟前
【Turborepo】【Next】 Turborepo + Next.js 前后端精简搭建笔记(带官网)
开发语言·javascript·笔记
Nix Lockhart43 分钟前
《算法与数据结构》第七章[算法4]:最短路径
c语言·数据结构·学习·算法·图论
阿部多瑞 ABU1 小时前
技术报告:高仿真虚构内容对主流大模型的现实感幻觉测试
人工智能·经验分享·笔记·学习·ai写作
songyuc2 小时前
Eureka: Human-Level Reward Design via Coding Large Language Models 译读笔记
笔记·语言模型·eureka
能不能别报错2 小时前
K8s学习笔记(十八) HPA控制器
笔记·学习·kubernetes
开发者导航3 小时前
【开发者导航】支持多存储方式的开源文件列表程序:OpenList
人工智能·学习·阿里云·信息可视化
GISer_Jing3 小时前
前端学习总结——AI&主流前沿方向篇
前端·人工智能·学习
William_cl3 小时前
一、前置基础(MVC学习前提)_核心特性_【C# 泛型入门】为什么说 List<T>是程序员的 “万能收纳盒“?避坑指南在此
学习·c#·mvc