Ajax reached the Chinese to solve the foreground appear backstage Chinese garbled

The solution is to the front desk twice coding , the background once decoding can be.

Reception jsp file

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

Background servlet code

. 1 String username = URLDecoder.decode ( "the corresponding field", "utf-8") ;

Simple login verification cases.

Case Description: To verify the Ajax request back-end console Chinese garbage problem is resolved.

Simple login screen, enter the user name login if the user name is prompted to enter a user name is not "user name can not be empty"; If the user name entered as "John Doe" then prompts the user name already occupied by other no tips.

Front page 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              } the else {
 28                  // create objects xhr 
29                  xhr =  new new the XMLHttpRequest ();
 30                  // establish a connection with the server 
31 is                  xhr.open ( " GET " , " the servlet / Login the uname =? "  + The uname, to true );
 32                  / / callback function 
33 is                  xhr.onreadystatechange = Process;
 34 is                  // send data 
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>

Background 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     void-Service protected (the HttpServletRequest REQ, the HttpServletResponse RESP) throws ServletException, IOException {
 15          // set the background response text format
 16          resp.setContentType ( "text / HTML; charset = UTF-. 8");
 . 17          // receiving a reception request
 18 is          String the uname URLDecoder.decode = (req.getParameter ( "the uname"));
 . 19  
20 is          // System.out.println (the uname);
 21 is  
22 is          the PrintWriter resp.getWriter OUT = ();
 23 is          IF ( "John Doe" .equals (uname )) {
 24              Out.print ( "username is already occupied");
 25          } {the else
 26 is              Out.print ( "username is available");
27         }
28     }
29 }
30

Ajax reached the Chinese to solve the foreground appear backstage Chinese garbled

Guess you like