jquery Ajax () function to pass the value of Chinese garbled solution introduction _jquery

Copy Code code as follows:

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

question:
When the back-end action program is submitted, the type being fetched is garbled
Workaround:
Method One: Use encodeURI two times before submitting the code, remember must be two times
1. Modify the following code

Copy Code code as follows:

Data:{id:1, Type:encodeuri (encodeURI (' Commodities '))}

2. In the background action to decode the obtained string
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 is similar, set header in ContentType can,
The key here is charset=utf-8, if not this, is not possible, the default jquery in the ContentType is not

First, test environment
jquery:1.3.2
tomcat:5.5.17
Second, test methods
1. Using Get method
Server-side Java code:

Copy Code code as follows:

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

Client JS Code:

Copy Code code as follows:

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

Results: Correct display

Copy Code code as follows:

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

Result: garbled

Copy Code code as follows:

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

results: Correct display

Copy Code code as follows:

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

Result: garbled

2.post Mode
server-side Java code:

Copy Code code as follows:

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

Client JS code:

Copy Code code as follows:

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

results: Correct display

Copy Code code as follows:

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

results: Correct display

Copy Code code as follows:

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

results: Correct display

Copy Code code as follows:

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

results: Correct display
third, the use of filter

Copy Code code 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 adds x-requested-with to the header when using AJAX, with the value: Xmlhttprequest,filter the character encoding to UTF8 when the AJAX request in jquery is judged to be This solves the Chinese garbled problem in post submission, and does not need to set request.setcharacterencoding ("UTF-8") in the Code;
For the Chinese garbled problem of get way, we suggest not to use get method to submit Chinese, all change to post ^-^

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

Copy Code code 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 Code code 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);
}