欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery调用AJAX时Get和post公用的乱码解决方法实例说明

程序员文章站 2023-11-22 20:17:28
以前在新浪博客写过js调用ajax时get和post的乱码解决办法,但是使用js代码比较繁琐,我们在使用ajax进行数据交互时可以使用js的一个成熟框架---jquery。 一个网站的设计,不管是...

以前在新浪博客写过js调用ajax时get和post的乱码解决办法,但是使用js代码比较繁琐,我们在使用ajax进行数据交互时可以使用js的一个成熟框架---jquery。

一个网站的设计,不管是注册登录还是分页查找,都需要提交参数到服务器以便得到所需的页面数据。为了减少用户因刷新页面带来的煎熬,ajax诞生。但是初学者进行项目开发时,会遇到一个很烦人的问题:中文乱码。

下面我就通过一个简单的实例来告诉大家哪些地方可能会导致乱码,我们需要通过什么方式来解决。
我们这个实例主要实现用户注册时用户名是否正确(已存在),在焦点移开username文本text时,对username进行异步提交并由servlet进行提取判断,并将结果返回页面做出相应提示。

第一步,新建一个web工程(默认gbk格式),取名jquery_ajax。在其webroot目录下新建js文件包,将jquery-1.4.4.js放于其中。

第二步,在src下创建servlet包,并编写vali.java

. 代码如下:


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("错误");
}else{
pw.println("正确");
}
}
}


从可从代码看出,含有编码格式的语句便是解决乱码的办法之一。
在代码中注意:
1.urldecoder.decode(request.getparameter("username"),"utf-8")——将页面传来的数据进行格式转换并提取
2.response.setcontenttype("text/html;charset=utf-8")——将响应返回值进行utf-8编码后返回页面
3.特别注意2中的转换需写在本方法内一切的response之前,否则可能失效
4.本servlet对数据的格式编码只适合post方法,若提交方式为get则提取页面数据的代码如下:

. 代码如下:


request.setcharacterencoding("utf-8");
stringusername = request.getparameter("username");
username= new string(username.getbytes("iso-8859-1"),"utf-8");


第三步,编写简单注册页面ajax.

. 代码如下:


<%@ 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">
<html>
<head>
<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 is 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>
</head>
<body>
用户名:<inputtype="text" name="username"onblur="vali();"/><span></span><br/>
密码:<inputtype="password" name="password" />
</body>
</html>


在代码中注意:
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和映射

. 代码如下:


<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>


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

最后总结大神的jquery乱码问题解决方法
1. 检查页面编码,将页面编码设置为utf8,如下:
<metahttp-equiv="content-type" content="text/html;charset=utf-8">
2. 检查servlet,在dopost或doget方法中添加如下代码:
response.setcontenttype("text/xml;charset=utf-8");
3. 修改tomcat文件,在tomcat_home/conf/server.xml文件中增加uriencoding=”utf8”:
<connector port="8080"protocol="http/1.1" connectiontimeout="20000" redirectport="8443"uriencoding="utf-8"/>
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"