解決Ajax前台中文傳到后台出現中文亂碼


遇到的問題是: 前台利用Ajax, get方式向后台發送中文數據出現亂碼.

解決辦法是前台兩次編碼, 后台一次解碼即可.

前台jsp文件

1 var text = "張三";
3 var username = encodeURI(encodeURI(text));

后台servlet代碼

1 String username =URLDecoder.decode("對應字段","utf-8");

簡單登錄校驗案例.

案例說明:為驗證Ajax請求后端控制台中文亂碼問題是否解決.

簡單登錄界面, 用戶輸入用戶名登錄. 若用戶名未輸入用戶名則提示"用戶名不能為空";若用戶名輸入為"張三"則提示用戶名已被占用.其它均無提示.

前台頁面index.jsp

 1 <%--
 2   Created by IntelliJ IDEA.
 3   User: hejjon
 4   Date: 2019/6/3
 5   Time: 10:19
 6   To change this template use File | Settings | File Templates.
 7 --%>
 8 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 9 <%
10     String path = request.getContextPath();
11     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
12             + path + "/";
13 %>
14 <html>
15 <head>
16     <base href="<%=basePath%>">
17     <title>用戶登錄界面</title>
18     <script type="text/javascript">
19         var xhr;
20         function change() {
21 
22             var val = document.getElementById("uname").value;
23             var uname = encodeURI(encodeURI(val));
24 
25             if (uname === "") {
26                 document.getElementById("namespan").innerHTML = "用戶名不能為空";
27             } else {
28                 // 創建xhr對象
29                 xhr = new XMLHttpRequest();
30                 // 與服務器建立連接
31                 xhr.open("get", "servlet/login?uname=" + uname, true);
32                 // 執行回調函數
33                 xhr.onreadystatechange = process;
34                 // 發送數據
35                 xhr.send(null);
36             }
37             
38         }
39          
40         function process() {
41            if (xhr.readyState == 4 && xhr.status == 200) {
42                // 接收后台響應
43                var text = xhr.responseText;
44                document.getElementById("namespan").innerHTML = text;
45            }
46         }
47     </script>
48 </head>
49 <body>
50 <p>
51     用戶: <input type="text" name="uname" id="uname" onblur="change()"/><span id="namespan"></span>
52 </p>
53 <p>
54     密碼: <input type="password" name="pwd" id="pwd"/>
55 </p>
56 </body>
57 </html>

 

后台LoginServlet.java

 1 import javax.servlet.ServletException;
 2 import javax.servlet.annotation.WebServlet;
 3 import javax.servlet.http.HttpServlet;
 4 import javax.servlet.http.HttpServletRequest;
 5 import javax.servlet.http.HttpServletResponse;
 6 import java.io.IOException;
 7 import java.io.PrintWriter;
 8 import java.net.URLDecoder;
 9 
10 
11 @WebServlet("/servlet/login")
12 public class LoginServlet extends HttpServlet {
13     @Override
14     protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
15         // 設置后台響應文本格式
16         resp.setContentType("text/html;charset=utf-8");
17         // 接收前台請求
18         String uname = URLDecoder.decode(req.getParameter("uname"));
19 
20         // System.out.println(uname);
21 
22         PrintWriter out = resp.getWriter();
23         if ("張三".equals(uname)) {
24             out.print("用戶名已被占用");
25         } else {
26             out.print("用戶名可用");
27         }
28     }
29 }
30     

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM