Multiple Solutions to jquery Chinese garbled characters

Source: Internet
Author: User

1. Solutions for garbled Chinese characters using $. ajax:

Copy codeThe 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 :{
"FormMap. TERMCOURSE_ID": termcourseId,
"FormMap. CLASS_ID": classId,
"FormMap. IS_ONLINE": "all ",
"FormMap. REALNAME": encodeURI (_ realname)
},
ContentType: "application/x-www-form-urlencoded; charset = UTF-8 ",
Success: function (data ){
Data = eval (data );
Var html = "";
$ ("# AllUnselectedUser" ).html (html );
},
Error: function (XMLHttpRequest, textStatus, errorThrown ){
Alert (textStatus );
}
});

When you use the & method in dataUrl for submission, whether the front-end uses encodeURI, encodeURIComponent, or escape to transcode Chinese and submit it to the Action, it is garbled, this is not the post-encoding of % e6 % b1 % 89% e5 % ad % 97. Not even if contentType is added.

Modify the & mode submission in dataUrl to data: {name: value.

Use URLDecoder. decode (realname, "UTF-8") in the Action to transcode to Chinese. The UTF-8 is used because Jquery's submission method defaults to a UTF-8, and even if you change charset in contentType to something else, such as GBK, the background also changes the UTF-8 to GBK, both cannot be converted correctly.

JQuery ajax garbled Problem Solution
I. Test Environment
JQuery: 1.3.2
Tomcat: 5.5.17
Ii. Test Methods
1. Use the get Method
Server-side java code:
Copy codeThe Code is as follows:
String name = new String (request. getParameter ("name"). getBytes ("iso8859-1"), "UTF-8 ");

Client js Code:
Copy codeThe Code is as follows:
$. Ajax ({url: "2.jsp", type:" get ", data: {name:" Chinese "}, success: function (response ){
Alert (response );
}});

Result: displayed correctly.
Copy codeThe Code is as follows:
$. Ajax ({url: "2.jsp", type:" get ", data:" name = Chinese ", success: function (response ){
Alert (response );
}});

Result: Garbled
Copy codeThe Code is as follows:
$. Get ("2.jsp", {name:" Chinese "}, function (response ){
Alert (response );
});

Result: displayed correctly.
Copy codeThe Code is as follows:
$. Get ("2.jsp"," name = Chinese ", function (response ){
Alert (response );
});

Result: Garbled

2. post Method
Server-side java code:
Copy codeThe Code is as follows:
Request. setCharacterEncoding ("UTF-8 ");
String name = request. getParameter ("name ");

Client js Code:
Copy codeThe Code is as follows:
$. Ajax ({url: "3.jsp", type:" post ", data:" method = testAjaxPost & name = Chinese ", success: function (response ){
Alert (response );
}});

Result: displayed correctly.
Copy codeThe Code is as follows:
$. Ajax ({url: "3.jsp", type:" post ", data: {name:" Chinese "}, success: function (response ){
Alert (response );
}});

Result: displayed correctly.
Copy codeThe Code is as follows:
$. Post ("3.jsp", {name:" Chinese "}, function (response ){
Alert (response );
});

Result: displayed correctly.
Copy codeThe Code is as follows:
$. Post ("3.jsp"," name = Chinese ", function (response ){
Alert (response );
});

Result: displayed correctly.
3. Use filter
Copy codeThe 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-")! = Null & req. getHeader ("X-Requested-With"). inclusignorecase ("XMLHttpRequest ")){
Request. setCharacterEncoding ("UTF-8 ");
} Else {
Request. setCharacterEncoding ("gbk ");
}
Chain. doFilter (request, response );
}

When using ajax, jQuery will add X-Requested-With to the header. The value is XMLHttpRequest. When the filter judges that it is a jQuery ajax request, it sets the character encoding to utf8, this solves the problem of garbled Chinese Characters in post submission, and does not need to set request in the code. setCharacterEncoding ("UTF-8 ");
For Chinese garbled characters in get mode, we recommend that you do not submit Chinese Characters in get mode, and change all to post ^-^.

To be consistent with the way prototype. js processes Chinese, you can use the following method to customize the attribute RequestType in the header.
Copy codeThe Code is as follows:
$. Ajax ({
Url: "3.jsp ",
Type: "post ",
Data: {name: "Chinese "},
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 ("Finished:" + textStatus );
}
});
 
The filter code is as follows:
Copy codeThe 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"). inclusignorecase ("ajax "))){
Request. setCharacterEncoding ("UTF-8 ");
} Else {
Request. setCharacterEncoding ("gbk ");
}
Chain. doFilter (request, response );
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.