Jquery实现Ajax用户名实时验证

来源：互联网发布：windows 8.1怎么激活编辑：程序博客网时间：2024/06/05 06:56

相关知识点

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应用。

0 0