Jquery实现Ajax用户名实时验证
相关知识点
l Jquery
l Ajax
l JavaScript
l Servlet
l Jsp
今天接触了Jquery技术，作为一个快速的，简洁的javaScript库，Jquery使用户能更方便地处理HTML documents（节点）、events（事件），实现动画效果，并且方便地为网站提供AJAX交互，不用考虑浏览器的差异。下面以Jquery实现Ajax用户名实时验证操作的例子，来给大家介绍一下Jquery。
运行效果
直接贴上源码
相信大多数学过Jquery的兄弟结合注释都能看得懂源码
_6_AjaxDemo.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">
<script language="JavaScript" src="./js/jquery-1.4.2.js"></script>
<title>Insert title here</title>
</head>
<body>
<h1>登陆界面</h1>
<h3>Jquery实现Ajax用户名实时验证</h3>
用户名<input id="name" type="text" name="username" /> <label></label><br>
密 码<input id="paw" type="text" name="paw" />
<script language="JavaScript">
$("#name").blur(function(){//失去焦点时执行
var value = $("#name").val();
$.ajax({
url:"/MyJqueryTest/AjaxServlet",//要请求的服务器url
data:{val:value},//一个对象，表示请求参数，有两个参数 method val method表示交给Servlet中的什么方法处理，不写默认为doGet或者doPost
async:true,//是否是异步请求
cache:false,//是否缓存结果
type:"POST",//请求方式
dataType:"json",//服务器返回什么类型数据 text xml javascript json(javascript对象)
success:function(result){//函数会在服务器执行成功后执行，result就是服务器返回结果
$("label").text(result.info);
}
});
});
</script>
</body>
</html>AjaxServlet.java
package cn.hzy.web.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置编码
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String value = request.getParameter("val");//获取jsp传递过来的val对象
//根据传递过来的值返回对应的json格式信息
if("csdn".equals(value)){
response.getWriter().print("{\"info\":\"用户名正确\"}");
}else if("".equals(value)){
response.getWriter().print("{\"info\":\"用户名不能为空\"}");
}else{
response.getWriter().print("{\"info\":\"用户名不存在\"}");
}
}
}
项目结构
相信通过这个简单的例子可以让大家能够掌握JQuery的基本Ajax应用。
