search
HomeWeb Front-endJS TutorialExample description of the common garbled code solution for Get and post when jQuery calls AJAX_jquery

I have previously written on Sina BlogThe solution to the garbled code of Get and post when js calls AJAX, but using js code is more cumbersome. When we use ajax for data interaction, we can use a mature framework of js---jQuery .

When designing a website, whether it is registration, login or paging search, parameters need to be submitted to the server in order to obtain the required page data. In order to reduce the user's suffering caused by refreshing the page, ajax was born. But when beginners develop projects, they will encounter a very annoying problem: Chinese garbled characters.

Below I will use a simple example to tell you where garbled characters may occur and how we need to solve them.
Our example mainly implements whether the username is correct (already exists) when the user registers. When the focus moves away from the username text, the username is submitted asynchronously and the servlet extracts and judges the result, and returns the result to the page to make corresponding prompts. .

The first step is to create a new web project (default GBK format) and name it jQuery_Ajax. Create a new js file package in its WebRoot directory and place jquery-1.4.4.js in it.

The second step is to create the servlet package under src and write Vali.java

Copy the code The code is 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("张三")){
pw.println("Error");
}else{
pw.println("Correct");
}
}
}

As can be seen from the code, statements containing encoding formats are one of the ways to solve garbled characters.
Note in the code:
1.URLDecoder.decode(request.getParameter("userName"),"utf-8") - Convert the format of the data from the page and Extract
2.response.setContentType("text/html;charset=utf-8") - encode the response return value in utf-8 and return to the page
3. Pay special attention to the conversion in 2 that needs to be written in Before all responses in this method, otherwise it may fail
4. The format encoding of data by this servlet is only suitable for the Post method. If the submission method is GET, the code to extract the page data is as follows:
Copy code The code is as follows:

request.setCharacterEncoding("utf-8");
StringuserName = request.getParameter(" userName");
userName= new String(userName.getBytes("iso-8859-1"),"utf-8");

The third step is to write a simple registration page ajax .jsp
Copy code The code is as follows:


String path = request.getContextPath();
String basePath =request.getScheme() "://" request.getServerName() ":" request.getServerPort() path "/";
%>




My JSP 'ajax.jsp' starting page








function vali(){
$.ajax({
type:"POST",
url:"/jQuery_Ajax/Vali",
data:encodeURI(encodeURI("userName=" $(":text").val())),
success:function(data){
$("span").text(data);
}
});
}



用户名:

密码:



在代码中注意:
1.页面要设置为utf-8,且引入jquery-1.4.4.js
2.ajax通过POST方法传递数据,注意data的设置。将返回数据填入span标签。

如果使用GET方法传递页面数据,js代码如下:
复制代码 代码如下:

function vali(){
$.ajax({
type:"GET",
url:"/jQuery_Ajax/Vali",
data:encodeURI("userName=" $(":text").val()),
success:function(data){
$("span").text(data);
}
});
}

最后一步,在web.xml配置servlet和映射
复制代码 代码如下:


This is the description of my J2EEcomponent
This is the display name of my J2EEcomponent
Vali
servlet.Vali


Vali
/Vali


经过以上代码的编写,本注册验证的项目已完成,将其部署至tomcat并通过网页访问。

最后总结大神的jQuery乱码问题解决方法
1. 检查页面编码,将页面编码设置为utf8,如下:

2. 检查servlet,在doPost或doGet方法中添加如下代码:
response.setContentType("text/xml;charset=utf-8");
3. 修改tomcat文件,在TOMCAT_HOME/conf/server.xml文件中增加URIEncoding=”utf8”:

4. 在工程中新增过滤器,将编码方式设置为utf8
经过以上四步操作后,问题依旧。
5. 检查ie的http header,查看contentType字段,如下:
contentType:"application/x-www-form-urlencoded"
6.检查firefox的http header,查看contentType字段,如下:
contentType:"application/x-www-form-urlencoded;charset=UTF-8"
对比5,6两步,问题出现。
7.修改jQuery-1.x.x.js文件,将
contentType:"application/x-www-form-urlencoded"改为下面的代码
contentType:"application/x-www-form-urlencoded;charset=UTF-8"
Statement
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
JavaScript's Role: Making the Web Interactive and DynamicJavaScript's Role: Making the Web Interactive and DynamicApr 24, 2025 am 12:12 AM

JavaScript is at the heart of modern websites because it enhances the interactivity and dynamicity of web pages. 1) It allows to change content without refreshing the page, 2) manipulate web pages through DOMAPI, 3) support complex interactive effects such as animation and drag-and-drop, 4) optimize performance and best practices to improve user experience.

C   and JavaScript: The Connection ExplainedC and JavaScript: The Connection ExplainedApr 23, 2025 am 12:07 AM

C and JavaScript achieve interoperability through WebAssembly. 1) C code is compiled into WebAssembly module and introduced into JavaScript environment to enhance computing power. 2) In game development, C handles physics engines and graphics rendering, and JavaScript is responsible for game logic and user interface.

From Websites to Apps: The Diverse Applications of JavaScriptFrom Websites to Apps: The Diverse Applications of JavaScriptApr 22, 2025 am 12:02 AM

JavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.

Python vs. JavaScript: Use Cases and Applications ComparedPython vs. JavaScript: Use Cases and Applications ComparedApr 21, 2025 am 12:01 AM

Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.

The Role of C/C   in JavaScript Interpreters and CompilersThe Role of C/C in JavaScript Interpreters and CompilersApr 20, 2025 am 12:01 AM

C and C play a vital role in the JavaScript engine, mainly used to implement interpreters and JIT compilers. 1) C is used to parse JavaScript source code and generate an abstract syntax tree. 2) C is responsible for generating and executing bytecode. 3) C implements the JIT compiler, optimizes and compiles hot-spot code at runtime, and significantly improves the execution efficiency of JavaScript.

JavaScript in Action: Real-World Examples and ProjectsJavaScript in Action: Real-World Examples and ProjectsApr 19, 2025 am 12:13 AM

JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

JavaScript and the Web: Core Functionality and Use CasesJavaScript and the Web: Core Functionality and Use CasesApr 18, 2025 am 12:19 AM

The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.

Understanding the JavaScript Engine: Implementation DetailsUnderstanding the JavaScript Engine: Implementation DetailsApr 17, 2025 am 12:05 AM

Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.