JQuery学习入门之AJAX

我们都知道，在注册页面时，常常会用到无页面刷新的数据交互，那么就要用到ajax技术，这里我们用jquery的ajax来进行一个简单的交互

首先建立一个jsp页面：

代码如下：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" language="javascript" src="js/jquery-1.4.2.min.js" ></script>

<script type="text/javascript">

$(function(){
	$("input[name=username]").keyup(function(){
		  $("#tem").load("ajaxJquery",{username:$("input[name=username]").val()},function(text){
			  if(text=="yes"){
				  $("#tem").text("用户名可用");
				  $("#tem").css("color","blue");
				  
			  }else{
				  $("#tem").text("用户名不可用");
				  $("#tem").css("color","red");
			  }	  
			  
		  });
	
	});

})


</script>
<body>
<form>
用户名：<input type="text" name="username" /><span id="tem">请输入用户名</span>


</form>
</body>
</html>

 还要导入一个包：jquery-1.4.2.min.js自己到百度上一搜一下就可以啦

Servlet端代码：

package hrm.ajax;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

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

/**
 * Servlet implementation class ajaxJquery
 */
public class ajaxJquery extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		this.doPost(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	String name=request.getParameter("username");
	List list=new ArrayList();
		list.add("admin");
		list.add("user");
		if(list.contains(name)){
			
			response.getWriter().write("no");
		}else{
			response.getWriter().write("yes");
		}
		
	}

}

 别忘记在web.xml中要注册servlet

这里：

  <servlet>
    <description></description>
    <display-name>ajaxJquery</display-name>
    <servlet-name>ajaxJquery</servlet-name>
    <servlet-class>ajax.ajaxJquery</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>ajaxJquery</servlet-name>
    <url-pattern>/ajaxJquery</url-pattern>
  </servlet-mapping>

 ok！

posted @ 2013-11-04 20:14  侯爷的代码  阅读(146)  评论(0)    收藏  举报