Home > Web Front-end > JS Tutorial > Various solutions to jquery Chinese garbled characters_jquery

Various solutions to jquery Chinese garbled characters_jquery

WBOY
Release: 2016-05-16 17:31:51
Original
1450 people have browsed it

1. Solution to Chinese garbled characters using $.ajax:

Copy code The code is as follows:

var _realname = $("input[name='_searchName ']").val();
var termcourseId = '<%=termid%>';
var classId = '<%=classid%>';
var url = " /addressbook/studentListNoPage.do";
//var dataUrl = "formMap.TERMCOURSE_ID=" termcourseId "&formMap.CLASS_ID=" classId "&formMap.IS_ONLINE=all&formMap.REALNAME=" _realname;
$.ajax({
type: "POST",
url: url,
dataType: "json",
data: {
termcourse "formMap.TERMCOURSE_ID": Id,
"formMap.CLASS_ID" :classId,
"formMap.IS_ONLINE":"all",
"formMap.REALNAME":encodeURI(_realname)
" -www-form-urlencoded; charset=utf-8",
    success: function(data){
     data = eval(data);
    var html = ""; html(html ); ;


among which When submitting using the & method in dataUrl, no matter whether the frontend uses encodeURI or encodeURIComponent or escape to transcode Chinese, the code submitted to Action will be garbled, and it is not the desired post-conversion encoding of Chinese characters. Even adding contentType won't work.

Change the & method of submission in dataUrl to the submission method of data:{name:value}.

Use URLDecoder.decode(realname, "UTF-8") in Action to transcode and convert it to Chinese. UTF-8 is used because Jquery's submission method defaults to UTF-8. Even if the charset in the contentType is modified to something else, such as GBK, and UTF-8 is modified to GBK in the background, it cannot be converted correctly.
Solution to jQuery ajax garbled code problem
1. Test environmentjQuery:1.3.2

tomcat:5.5.17

2. Test method

1. Use the get method

server Terminal java code:





Copy code


The code is as follows:



Copy code


The code is as follows:Result: Correct display




Copy code


The code is as follows:Result: garbled code




Copy code


The code is as follows:
$.get("2.jsp", { name: "Chinese" },function(response){ alert(response);});
Result: Correctly displayed
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:
Copy code The code is as follows:
$.ajax({url: "3.jsp",type: "post ",data: {name:"中文"},success: function(response){
alert(response);
}});

Result: Correct display

Copy code The code is as follows:
$.post("3.jsp", { name: "Chinese " },function(response){
alert(response);
});

Result: Correctly displayed

Copy the code The code is as follows:
$.post("3.jsp", "name=中文",function(response){
alert(response ; >
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);}
When jQuery uses ajax, it will add X-Requested-With in the header. The value is: XMLHttpRequest. When the filter determines that it is jQuery's ajax request, the character encoding is set to utf8. This can solve the problem of Chinese garbled characters in post submissions. , there is no need to set request.setCharacterEncoding("UTF-8") in the code;
For 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 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);
}
});


filter代码如下:
复制代码 代码如下:

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);
}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template