JQuery中使用Ajax实现诸如登录名检测等异步请求Demo
2016-01-23 18:13
836 查看
上一篇博客介绍了注册登录时一次性图形验证码的工具类的编写,这篇随笔同样是我在写用jquery中ajax实现登录信息检测的异步请求功能的笔记,在各个网站进行信息用户注册时,需要在不刷新页面的情况下对注册信息进行检测并实时返回信息,比如这种情况:
对于不需要访问数据库的页面验证比较简单,一旦需要访问数据库,就比较麻烦一些,好在Jquery可以很方便的使用ajax,我写了一个简单到不能再简单的例子,效果是这样的:
下面介绍步骤及代码:
1:jsp页面(重点是jquery函数)如下:
新建一个servlet用于处理请求:
这里为了简便就没有写访问数据库的诸多代码,如果用书输入"wang",就返回"wang合法",如果输入"somelse",就显示"someelse不合法".
对于不需要访问数据库的页面验证比较简单,一旦需要访问数据库,就比较麻烦一些,好在Jquery可以很方便的使用ajax,我写了一个简单到不能再简单的例子,效果是这样的:
下面介绍步骤及代码:
1:jsp页面(重点是jquery函数)如下:
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 3 4 <html> 5 <head> 6 <base href="<%=basePath%>"> 7 <script type="text/javascript" src='<c:url value='/jquery-1.5.1.js'/>'></script> 8 <script type="text/javascript"> 9 $(function() { 10 $("#username").blur(function() { 11 var uname = $("#username").val(); 12 $.ajax({ 13 //要请求的服务器url 14 url : "/jqueryTest/JQueryServlet", 15 //表示请求参数的对象,参数:val=uname 16 data : { 17 val : uname 18 }, 19 //是否为异步请求 20 async : true, 21 //是否缓存结果 22 cache : false, 23 //请求方式 24 type : "POST", 25 //服务器返回的是什么类型 26 dataType : "json", 27 //函数会在服务器执行成功时被调用,参数result就是服务器返回的值 28 success : function(result) { 29 /* if (result) { 30 $("#nameLabel").text("输入正确"); 31 } else { 32 $("#nameLabel").text("用户名不存在"); 33 } */ 34 $("#nameLabel").text(uname+result.info); 35 } 36 }); 37 }); 38 }); 39 </script> 40 <style type="text/css"> 41 </style> 42 </head> 43 44 <body> 45 用户名 <input type="text" name="name" id="username" /> 47 <label id="nameLabel"></label><br> 48 密 码:<input type="password" name="pwd" /><br> 51 </body> 52 </html>
新建一个servlet用于处理请求:
package com.wang.test; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class JQueryServlet extends HttpServlet { public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); response.setCharacterEncoding("utf-8"); PrintWriter out = response.getWriter(); String value=request.getParameter("val"); System.out.println("value:"+value); /*if(value.equals("wang")){ out.print(true); }else{ out.print(false); }*/ if(value.equals("wang")){ String str="{\"name\":\""+value+"\",\"info\":\"合法\"}"; out.print(str); }else{ String str="{\"name\":\""+value+"\",\"info\":\"不合法\"}"; out.print(str); } } }
这里为了简便就没有写访问数据库的诸多代码,如果用书输入"wang",就返回"wang合法",如果输入"somelse",就显示"someelse不合法".
相关文章推荐
- jquery选择器扩展之样式选择器
- I am back-电商网站开发&jQuery
- jquery,獲取父級對象索引失敗,未理解,另附別樣解決方案
- jquery搜索推荐列表插件
- jQuery form插件的使用--用 formData 参数校验表单,验证后提交(简单验证).
- jQueryRegLogin弹出可拖动的登录和注册
- 【JQuery】纵向横向菜单
- jQuery Ajax的Spring后台接收数组
- jquery + easyui 等前台疑难杂症
- javascript、jquery、AJAX总结
- 人人必知的10个jQuery小技巧
- jQuery操作Table技巧大汇总
- jquery autocomplete ajax获取动态数据,兼容各浏览器,支持中文
- jquery中常用的节点查找,属性过滤
- 5 jQuery.each() Function Examples
- jquery中字符串数组相符转换
- jquery中的clone()克隆函数
- jQuery操作Table技巧大汇总
- jQuery form插件之formDdata参数校验表单及验证后提交
- jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象