jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
以前在新浪博客写过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");
<%@ 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标签。
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"
相关推荐
-
Jquery Ajax学习实例3 向WebService发出请求，调用方法返回数据
一.WebService.asmx 处理业务数据,在GetWhether方法中产生天气情况数据,供JqueryRequest.aspx调用,代码如下: 复制代码 代码如下: [System.Web.Script.Services.ScriptService] public class WebService : System.Web.Services.WebService { public WebService () { //如果使用设计的组件,请取消注释以下行 //InitializeCompo
-
jquery.Ajax()方法调用Asp.Net后台的方法解析
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法.先来个简单的实例热热身吧. 1.无参数的方法调用asp.net code: 复制代码 代码如下: using System.Web.Script.Services; [WebMethod] public static string SayHello() { return "Hello Ajax!"; } using System.Web.Script.Services; [WebMe
-
使用jquery 的ajax调用总是错误亲测的解决方法
使用jquery 的ajax功能调用一个页面,却发现总是出现错误. js代码如下 复制代码 代码如下: $.ajax({ type: 'post', url: 'TestData.aspx', data: { language_type: 'cn'}, dataType: 'json', success: function (data) { alert('ok'); }, error: function (data) { alert('err'); }); } TestData.aspx代码如下
-
jquery中的ajax方法怎样通过JSONP进行远程调用
关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用 首先介绍下$.ajax的参数 type:请求方式 GET/POST url:请求地址 async:布尔类型,默认为true 表示请求是否为异步,如果为false表示为同步. dataType:返回的数据类型 jsonp:传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:自定义的js
-
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们发现程序执行完后并没有获取到我们想要的值,这时很有可能是因为你用的是ajax的异步调用async:true(默认情况),如: 复制代码 代码如下: function ManageCommentText(text) {var result = text;$.ajax({data: "get",url: "GetComments.aspx",data: "typ
-
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
1.新建demo.aspx页面. 2.首先在该页面的后台文件demos.aspx.cs中添加引用. using System.Web.Services; 3.无参数的方法调用.大家注意了,这个版本不能低于.net framework 2.0.2.0已下不支持的. 后台代码: 复制代码 代码如下: [WebMethod] public static string SayHello() { return "Hello Ajax!"; } JS代码: 复制代码 代码如下: $(functio
-
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
ws.aspx 代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1&q
-
jquery利用ajax调用后台方法实例
复制代码 代码如下: 语法:$(function(){ var callback = function(r){ //r表示后台数据返回的数据. } $.get("",callback); //引号里面写方法的路径}); 这样就可以得到后台方法得到的数据显示在html前端了. 以下是工作中写的一段js和后台方法: js: 复制代码 代码如下: $(function(){ var callback = function (r) { var dat
-
前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例
前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 CasMenu.aspx页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr
-
jQuery AJAX实现调用页面后台方法
本文实例为大家分享了jQuery AJAX调用页面后台方法,供大家参考,具体内容如下 1.新建demo.aspx页面. 2.首先在该页面的后台文件demos.aspx.cs中添加引用. using System.Web.Services; 1).无参数的方法调用. 大家注意了,这个版本不能低于.net framework 2.0.2.0已下不支持的. 后台代码: [WebMethod] public static string SayHello() { return "Hello Ajax!&q