jquery's Ajax Chinese garbled solution

Source: Internet
Author: User

$.ajax ({
DataType: ' JSON ', type: ' POST ', url: ' http://localhost/test/test.do ', data: {id:1, type: ' Commodity '},success:function (data) { } } );
questions:
The type that was taken when the background action program was submitted is garbled
Workaround:
Method one: Before committing to use encodeURI two times code, remember must be two times
1. Modify the following code

data:{id:1, Type:encodeuri (encodeURI (' Product ')}

2. Decode the obtained string in the background action
1, String type = Request.getparameter ("type");
2. Type = Urldecoder.decode (type, "Utf-8″");
Method Two: Ajax configuration contenttype properties, plus Charset=utf-8
Add the following parameters to the Ajax method
ContentType: "application/x-www-form-urlencoded; Charset=utf-8″ use other JS frame or xhr are similar, set the header contenttype can be,
The key here is charset=utf-8, if not this, is not, the default jquery in the ContentType is not

First, the test environment
jquery:1.3.2
tomcat:5.5.17
second, the test method
1. Use the Get method
Server-side Java code:

String name = new String (Request.getparameter ("name"). GetBytes ("Iso8859-1"), "Utf-8");

Client JS Code:

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

Result: Correct display

$.ajax ({url: "2.jsp", type: "Get", Data: "Name= Chinese", success:function (response) {
alert (response);
}});

Result: garbled

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

Result: Correct display
Copy CodeThe code is as follows:
$.get ("2.jsp", "name= Chinese", function (response) {
alert (response);
});

Result: garbled

2.post mode
Server-side Java code:

request.setcharacterencoding ("UTF-8");
String name = Request.getparameter ("name");

Client JS Code:

$.ajax ({url: "3.jsp", type: "POST", Data: "Method=testajaxpost&name= Chinese", success:function (response) {
alert (response);
}});

Result: Correct display
$.ajax ({url: "3.jsp", type: "POST", data: {name: "Chinese"},success:function (response) {
alert (response);
}});

Result: Correct display

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

Result: Correct display

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

Result: Correct display
Third, use filter

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 adds x-requested-with to the header when using AJAX, with the value: Xmlhttprequest,filter the character encoding as UTF8 when judging the Ajax request of jquery. This can solve the problem of Chinese garbled in post submission, do not need to set request.setcharacterencoding ("UTF-8") in the Code;
For get way of Chinese garbled problem, it is recommended not to use Get method to submit Chinese, all changed to post ^-^

To be consistent with the way Prototype.js handles Chinese, you can customize the properties in the header using the following methods RequestType

$.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 ("Done:" + textstatus);
}
});

The filter 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);
}

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.