Introduction to the solution to the Chinese garbled value passed by jquery's ajax() function

Introduction to the solution to the Chinese garbled value passed by jquery's ajax() function_jquery

WBOY

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

Original

1090 people have browsed it

Copy code The code is as follows:

 
$.ajax({ 
　 dataType: 'json',type : 'POST',url : 'http://localhost/test/test.do',data : {id: 1, type: 'Product'},success : function(data){ } } ); 

Problem:
When submitting the background action program, the type obtained is garbled
Solution:
Method 1: Use before submission encodeURI is encoded twice, remember it must be twice
1. Modify the following code

Copy the code The code is as follows:

data:{id:1, type:encodeURI(encodeURI('product'))}

2. In the background action To decode the obtained string
1. String type = request.getParameter(“type”);
2. type = URLDecoder.decode(type, “UTF-8″);
Method 2: Ajax configures the contentType attribute and adds charset=UTF-8
Add the following parameters to the ajax method
contentType: “application/x-www-form-urlencoded; charset=UTF-8″ Use other The js framework or xhr are almost the same. Just set the contentType in the header.
The key here is charset=UTF-8. Without this, it won’t work. By default, the contentType in jQuery is not available

1. Test environment
jQuery:1.3.2
tomcat:5.5.17
2. Test method
1. Use get method
server Terminal java code:

Copy code The code is as follows:

 
String name = new String(request. getParameter("name").getBytes("iso8859-1"),"utf-8"); 

Client js code:

Copy code The code is as follows:

 
$.ajax({url: "2.jsp",type: "get",data: {name:" Chinese"},success: function(response){ 
alert(response); 
}}); 

Result: Correct display

Copy code The code is as follows:

 
$.ajax({url: "2.jsp",type: "get ",data: "name=中文",success: function(response){ 
alert(response); 
}}); 

Result: Garbled characters

Copy code The code is as follows:

 
$.get("2.jsp", { name : "Chinese" },function(response){ 
alert(response); 
}); 

Result: Correct display

Copy code The code is as follows:

 
$.get("2.jsp", "name=中文",function( response){ 
alert(response); 
}); 

Result: garbled code

2.post method
Server-side java code:

Copy code The code is as follows:

 
request.setCharacterEncoding("UTF-8"); 
String name = request.getParameter("name"); 

Client js code:

Copy code The code is as follows:

 
$.ajax({url: "3.jsp", type: "post",data: "method=testAjaxPost&name=中文",success: function(response){ 
alert(response); 
}}); 

Result: Correctly displayed

Copy code The code is as follows:

 
$.ajax({ url: "3.jsp",type: "post",data: {name:"中文"},success: function(response){ 
alert(response); 
}}); 

Result: Correctly displayed

Copy code The code is as follows:

 
$.post("3.jsp", { name: "中文" },function(response){ 
alert(response); 
}); 

Result: Correctly displayed

Copy code The code is as follows:

 
 $.post("3.jsp", "name=中文",function(response){ 
alert(response); 
}); 

Result: Correct Display
3. Use filter

Copy the code The code is as follows:

 
public void doFilter(ServletRequest request, ServletResponse response, 
FilterChain chain) throws IOException, ServletException { 
HttpServletRequest req = (HttpServletRequest) request; 
if (req.getHeader("X-Requested -With") != null && req.getHeader("X-Requested-With").equalsIgnoreCase("XMLHttpRequest")) { 
request.setCharacterEncoding("utf-8"); 
} else { 
request.setCharacterEncoding("gbk"); 
} 
chain.doFilter(request, response); 
} 

jQuery will be in the header when using ajax Add X-Requested-With, the value is: XMLHttpRequest. When the filter determines that it is an ajax request of jQuery, the character encoding is set to utf8. This can solve the Chinese garbled problem in post submission. There is no need to set request.setCharacterEncoding(( "UTF-8");
Regarding the problem of Chinese garbled characters in the get method, it is recommended not to use the get method to submit Chinese, but to post instead. ^-^

In order to be consistent with the way prototype.js handles Chinese, You can use the following method to customize the attribute RequestType in the header

Copy the code The code is as follows:

 
$.ajax({ 
url: "3.jsp", 
type: "post", 
data: {name:"中文"}, 
beforeSend: function(XMLHttpRequest){ 
XMLHttpRequest.setRequestHeader("RequestType", "ajax"); 
alert("start"); 
}, 
success: function(data, textStatus){ 
alert(data); 
}, 
error: function(XMLHttpRequest, textStatus, errorThrown){ 
alert("Error: " textStatus); 
}, 
complete: function(XMLHttpRequest, textStatus){ 
alert("Complete:" textStatus); 
} 
}); 

The filter code is as follows:

Copy code The code is as follows:

 
public void doFilter(ServletRequest request, ServletResponse response, 
FilterChain chain) throws IOException, ServletException { 
HttpServletRequest req = (HttpServletRequest) request; 
if (req.getHeader("RequestType") != null && req.getHeader("RequestType").equalsIgnoreCase("ajax"))) { 
request.setCharacterEncoding ("utf-8"); 
} else { 
request.setCharacterEncoding("gbk"); 
} 
chain.doFilter(request, response); 
} 