Jquery实现Ajax用户名实时验证

时间 2019-11-17

标签 jquery 实现 ajax 用户名实时验证栏目 JQuery 繁體版

原文原文链接

相关知识点javascript

l Jqueryhtml

l Ajaxjava

l JavaScriptjquery

l Servletweb

l Jspajax

今天接触了Jquery技术，做为一个快速的，简洁的javaScript库，Jquery使用户能更方便地处理HTML documents（节点）、events（事件），实现动画效果，而且方便地为网站提供AJAX交互，不用考虑浏览器的差别。下面以Jquery实现Ajax用户名实时验证操做的例子，来给你们介绍一下Jquery。json

运行效果浏览器

直接贴上源码缓存

相信大多数学过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应用。