Example description of the common garbled code solution for Get and post when jQuery calls AJAX

Example description of the common garbled code solution for Get and post when jQuery calls AJAX_jquery

WBOY

Release： 2016-05-16 17:32:52

Original

1162 people have browsed it

I have previously written on Sina BlogThe solution to the garbled code of Get and post when js calls AJAX, but using js code is more cumbersome. When we use ajax for data interaction, we can use a mature framework of js---jQuery .

When designing a website, whether it is registration, login or paging search, parameters need to be submitted to the server in order to obtain the required page data. In order to reduce the user's suffering caused by refreshing the page, ajax was born. But when beginners develop projects, they will encounter a very annoying problem: Chinese garbled characters.

Below I will use a simple example to tell you where garbled characters may occur and how we need to solve them.
Our example mainly implements whether the username is correct (already exists) when the user registers. When the focus moves away from the username text, the username is submitted asynchronously and the servlet extracts and judges the result, and returns the result to the page to make corresponding prompts. .

The first step is to create a new web project (default GBK format) and name it jQuery_Ajax. Create a new js file package in its WebRoot directory and place jquery-1.4.4.js in it.

The second step is to create the servlet package under src and write Vali.java

Copy the code The code is as follows :

 
package servlet; 
import java.io.IOException; 
import java.io.PrintWriter; 
import java.net.URLDecoder; 
import javax.servlet .ServletException; 
import javax.servlet.http.HttpServlet; 
importjavax.servlet.http.HttpServletRequest; 
importjavax.servlet.http.HttpServletResponse; 
public class Vali extends HttpServlet { 
@ Override 
protectedvoid service(HttpServletRequest request, HttpServletResponse response) 
throwsServletException, IOException { 
StringuserName = URLDecoder.decode(request.getParameter("userName"),"utf-8"); 
System. out.println(userName); 
response.setContentType("text/html;charset=utf-8"); 
PrintWriter pw =response.getWriter(); 
if(userName.equals("张三")){ 
pw.println("Error"); 
}else{ 
pw.println("Correct"); 
} 
} 
} 
 

As can be seen from the code, statements containing encoding formats are one of the ways to solve garbled characters.
Note in the code:
1.URLDecoder.decode(request.getParameter("userName"),"utf-8") - Convert the format of the data from the page and Extract
2.response.setContentType("text/html;charset=utf-8") - encode the response return value in utf-8 and return to the page
3. Pay special attention to the conversion in 2 that needs to be written in Before all responses in this method, otherwise it may fail
4. The format encoding of data by this servlet is only suitable for the Post method. If the submission method is GET, the code to extract the page data is as follows:

Copy code The code is as follows:

 
request.setCharacterEncoding("utf-8"); 
StringuserName = request.getParameter(" userName"); 
userName= new String(userName.getBytes("iso-8859-1"),"utf-8"); 

The third step is to write a simple registration page ajax .jsp

Copy code The code is as follows:

<%@ page language="java"import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath =request.getScheme() "://" request.getServerName() ":" request.getServerPort() path "/";
%>

My JSP 'ajax.jsp' starting page

function vali(){
$.ajax({
type:"POST",
url:"/jQuery_Ajax/Vali",
data:encodeURI(encodeURI("userName=" $(":text").val())),
success:function(data){
$("span").text(data);
}
});
}

用户名:

密码:

在代码中注意：
1.页面要设置为utf-8，且引入jquery-1.4.4.js
2.ajax通过POST方法传递数据，注意data的设置。将返回数据填入span标签。

如果使用GET方法传递页面数据，js代码如下：

复制代码代码如下:

 
function vali(){ 
$.ajax({ 
type:"GET", 
url:"/jQuery_Ajax/Vali", 
data:encodeURI("userName=" $(":text").val()), 
success:function(data){ 
$("span").text(data); 
} 
}); 
} 

最后一步，在web.xml配置servlet和映射

复制代码代码如下:

 
This is the description of my J2EEcomponent 
This is the display name of my J2EEcomponent 
Vali 
servlet.Vali 
 
Vali 
/Vali

经过以上代码的编写，本注册验证的项目已完成，将其部署至tomcat并通过网页访问。

最后总结大神的jQuery乱码问题解决方法：
1. 检查页面编码，将页面编码设置为utf8，如下：

2. 检查servlet，在doPost或doGet方法中添加如下代码：
response.setContentType("text/xml;charset=utf-8");
3. 修改tomcat文件，在TOMCAT_HOME/conf/server.xml文件中增加URIEncoding=”utf8”:

4. 在工程中新增过滤器，将编码方式设置为utf8
经过以上四步操作后，问题依旧。
5. 检查ie的http header，查看contentType字段，如下：
contentType:"application/x-www-form-urlencoded"
6．检查firefox的http header，查看contentType字段，如下：
contentType:"application/x-www-form-urlencoded;charset=UTF-8"
对比5,6两步，问题出现。
7.修改jQuery-1.x.x.js文件，将
contentType:"application/x-www-form-urlencoded"改为下面的代码
contentType:"application/x-www-form-urlencoded;charset=UTF-8"