jquery call Ajax when get and post common garbled solution Instance description _jquery

Source: Internet
Author: User
Sina blog previously wrote JS call Ajax when get and post garbled solution, but the use of JS code is more cumbersome, we use AJAX for data interaction can use JS a mature framework---jQuery.

The design of a Web site, whether registering or paging, requires submitting parameters to the server to get the required page data. In order to reduce the user caused by refreshing the suffering of the page, Ajax was born. But when a beginner develops a project, it will encounter a very annoying problem: Chinese garbled.

Below I have a simple example to tell you which places can lead to garbled, we need to solve by what way.
Our example is the main implementation of user registration when the user name is correct (already exists), in the focus of the username text, the username asynchronous submission and the servlet to extract the judgment, and the results returned to the page to make corresponding prompts.

The first step is to create a new Web project (default GBK format), named Jquery_ajax. Create a new JS package in its Webroot directory and place the jquery-1.4.4.js in it.

The second step is to create a servlet package under SRC and write Vali.java
Copy Code code as follows:

Package servlet;
Import java.io.IOException;
Import Java.io.PrintWriter;
Import Java.net.URLDecoder;
Import javax.servlet.ServletException;
Import Javax.servlet.http.HttpServlet;
Importjavax.servlet.http.HttpServletRequest;
Importjavax.servlet.http.HttpServletResponse;
public class Vali extends HttpServlet {
@Override
Protectedvoid Service (HttpServletRequest request, httpservletresponse response)
Throwsservletexception, IOException {
Stringusername = Urldecoder.decode (Request.getparameter ("UserName"), "Utf-8");
System.out.println (UserName);
Response.setcontenttype ("Text/html;charset=utf-8");
PrintWriter pw =response.getwriter ();
if (Username.equals ("John")) {
PW.PRINTLN ("error");
}else{
PW.PRINTLN ("correct");
}
}
}

From the code can be seen in the coding format of the statement is one of the ways to solve garbled.
Note in your code:
1.urldecoder.decode (Request.getparameter ("UserName"), "Utf-8")--converts the data from the page into a format and extracts
2.response.setcontenttype ("Text/html;charset=utf-8")--Returns the response return value utf-8 the page
3. Special attention should be paid to the conversion in 2 to be written in all response of this method, otherwise it may fail
4. This servlet formats the data in a way that is only suitable for the post method, and the code that extracts the page data if the submission is get is as follows:
Copy Code code as follows:

Request.setcharacterencoding ("Utf-8");
Stringusername = Request.getparameter ("UserName");
Username= New String (Username.getbytes ("iso-8859-1"), "Utf-8");

Step three, write a simple registration page ajax.jsp
Copy Code code as follows:

<%@ page language= "java" import= "java.util.*" pageencoding= "Utf-8"%>
<%
String path = Request.getcontextpath ();
String BasePath =request.getscheme () + "://" +request.getservername () + ":" +request.getserverport () +path+ "/";
%>
<! DOCTYPE HTML Public "-//w3c//dtdhtml 4.01 transitional//en" >
<base href= "<%=basePath%>" >
<title>my JSP ' ajax.jsp ' starting page</title>
<metahttp-equiv= "Pragma" content= "No-cache" >
<metahttp-equiv= "Cache-control" content= "No-cache" >
<metahttp-equiv= "Expires" content= "0" >
<metahttp-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
<metahttp-equiv= "description" content= "This are my page" >
<!--
<linkrel= "stylesheet" type= "Text/css" href= "Styles.css" >
-->
<scripttype= "Text/javascript" src= "Js/jquery-1.4.4.js" ></script>
<scripttype= "Text/javascript" >
function Vali () {
$.ajax ({
Type: "POST",
URL: "/jquery_ajax/vali",
Data:encodeuri (encodeURI ("Username=" +$ (": Text"). Val ()),
Success:function (data) {
$ ("span"). text (data);
}
});
}
</script>
<body>
User name: <inputtype= "text" name= "UserName" onblur= "Vali ();" /><span></span><br/>
Password: <inputtype= "password" name= "password"/>
</body>

Note in your code:
1. Page to be set to Utf-8, and introduce jquery-1.4.4.js
2.ajax The Post method to pass the data, pay attention to the settings. Fills the return data into the span label.

If you use the Get method to pass the page data, the JS code is as follows:
Copy Code code as follows:

function Vali () {
$.ajax ({
Type: "Get",
URL: "/jquery_ajax/vali",
Data:encodeuri ("Username=" +$ (": Text"). Val ()),
Success:function (data) {
$ ("span"). text (data);
}
});
}

The final step, configuring the servlet and mapping in Web.xml
Copy Code code as follows:

<servlet>
<description>this is the description of my j2eecomponent</description>
<display-name>this is, the display name of my j2eecomponent</display-name>
<servlet-name>Vali</servlet-name>
<servlet-class>servlet. Vali</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Vali</servlet-name>
<url-pattern>/Vali</url-pattern>
</servlet-mapping>

After the above code is written, this registration verification project has been completed, deployed to Tomcat and accessed via web pages.

finally summed up the great God's jquery garbled problem solving method
1. Check the page encoding, set the page encoding to UTF8, as follows:
<metahttp-equiv= "Content-type" content= "Text/html;charset=utf-8" >
2. Check the servlet and add the following code to the Dopost or Doget method:
Response.setcontenttype ("Text/xml;charset=utf-8");
3. Modify the Tomcat file to add uriencoding= "UTF8" to the Tomcat_home/conf/server.xml file:
<connector port= "8080" protocol= "http/1.1" connectiontimeout= "20000" redirectport= "8443" URIEncoding= "Utf-8"/ >
4. Add the filter in the project, set the encoding mode to UTF8
After the above four steps, the problem remains.
5. Check the HTTP header for IE, and view the ContentType field as follows:
ContentType: "Application/x-www-form-urlencoded"
6. Check the HTTP header for Firefox and view the ContentType field as follows:
ContentType: "Application/x-www-form-urlencoded;charset=utf-8"
Contrast 5, 62 steps, problems arise.
7. Modify the Jquery-1.x.x.js file to
ContentType: "application/x-www-form-urlencoded" changed to the following code
ContentType: "Application/x-www-form-urlencoded;charset=utf-8"
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.