jquery的Ajax框架乱码解决

于 2011-05-18 21:04:27 发布 · 125 阅读

文章标签：

#框架 #Ajax #jQuery #Java #Servlet #ViewUI

Ajax 专栏收录该内容

2 篇文章

订阅专栏

本文提供了一个使用Ajax实现的简单登录验证示例。通过前端JavaScript与后端Servlet交互完成用户名和密码验证，展示了如何处理中文乱码问题及基本的身份验证流程。

[size=medium][color=blue]
1.下面代码为服务器端获取请求信息Servlet,真正用的时候可能就是struts等[/color][/size]

package com.adu;

import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class AjaxServer extends HttpServlet {

	private static final long serialVersionUID = -1391282338046351379L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException { 

		response.setContentType("text/html");
		response.setCharacterEncoding("UTF-8");   

		PrintWriter out = response.getWriter();

		//获取页面jquery的url提交的数据，进行处理
//		String userName = request.getParameter("name");
//		String passWord = request.getParameter("password");

		String name = request.getParameter("name");
 		String password = request.getParameter("password");

		//转换字符集编码,避免中文乱码问题
		String userName = URLDecoder.decode(name,"UTF-8");
		String passWord = URLDecoder.decode(password,"UTF-8");


		//进行逻辑判断，看输入是否合法
		if(userName.length() != 0 && userName != null && passWord.length() != 0 && passWord != null){

			if(userName.equals("mawanli") && passWord.equals("123")){

				//out.print("Welcome* "+userName+" *visit my web!");
				out.print("欢迎* "+userName+" *访问！");
				out.flush();
				out.close();

			}else{

				out.print("sorry please login again!");
//				out.print("请输入正确的用户名和密码！");
			}	
		}
		else{

			out.print("please input right name and password!");
			//out.print("请重新登录！");
		}

	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		resp.setContentType("text/html");
		this.doGet(req, resp);
	}

}

[/size]
[size=medium][color=blue]2.以下是页面测试的代码：[/color][/size]

<%@ 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//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>测试ajax验证登录</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  <script type="text/javascript" src="js/jquery-1.6.min.js"></script></head>
  <script type="text/javascript">

  //添加时间戳，以防每次测试为不同的url，解决浏览器缓存问题
function convertUrl(url) {   

	  var timestamp = (new Date()).valueOf();   
      if (url.indexOf("?") >= 0) {   
       url = url + "&t=" + timestamp;   
      } else {   
         url = url + "?t=" + timestamp;   
     }   
       return url;  

  }
  //用encodeURI可以解决页面传值时的中文乱码问题
  function validate(){
	  var name = encodeURI(encodeURI($("#userName").val()));
      var password = encodeURI(encodeURI($("#passWord").val()));
      var url = "AjaxServer?name="+name+"&password="+password;
      url = convertUrl(url); 

 	  $.get(url,null,function(data){
		                       $("#result").html(data);
	                   });
  }


  </script>

  <body>
   <div align="center">
   <div >
   <form action="#" method="get">
   <table>
   <tr><td>用户名：</td><td><input type="text" name="userName" id="userName"/></td></tr>
   <tr><td>密    码：</td><td><input type="password" id="passWord"/></td></tr>
   <tr align="right"><td colspan="2"><input type="button" value="登录" onclick="validate()"/>
   <input type="reset" value="取消"/></td></tr>
   </table> 
   </form>

   <div id="result"></div>
   </div>
   <hr width="600px" align="center" size="3" color="green"/>


   </div>

  </body>
</html>
[code="java"]

[align=left][/align][/code]