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

向右看齐 2024-02-18 11:04 33阅读 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);
>         }
>     }