JQuery Ajax如何实现注册检测用户名

Ajax（无需等待直接向服务器发起请求）

(Asynchronous Javascript And Xml) ：异步的

Google创新的一种js技术

方法一：比较原始没有封装的方法：

//核对用户名是否可用
    var xmlhttp = null;

    function checkUser(userName) {
      if (xmlhttp == null) {
        xmlhttp = new XMLHttpRequest();//第一步：创建一步通信对象
      }
      //第二步：设定回调函数
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
          $("#tip").html(xmlhttp.responseText);
        }
      }
      xmlhttp.open("get", "register?op=check&userName=" + userName);
      xmlhttp.send();
    }

从文本框中输入一个字符后就立即到数据库中查找该用户名是否存在，如果存在，提示不可用，直到可用为止；

方法二：JQuery的Ajax:

//核对用户名是否可用
    function checkUser(userName) {
      $.ajax({
        type: 'post',//如果是get可以不写type，默认是get
        url: "register",//action方式
        data: {op: 'check', userName: userName}, //参数，如果参数多，可用date后跟一个大括号
        success: function (res) {//回调函数
          if (res.indexOf("yes") !== -1) {
            $("#tip").html("Yes! Available: user name!");//可用
            //$("#tj").prop("disabled", false); //设置按钮可用

          } else {
            $("#tip").html("No! User name: not available!");//不可用
            // $("#tj").prop("disabled", true); //设置按钮不可用
          }

        }
      });
    }

运行效果和上面一样；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于ajax及jQurey实现局部刷新过程解析

    1.jQurey使用时需导入jquery-1.4.2.js在web文件夹下 并在写script时需像如下定义script标签: <script src="js/jquery-1.4.2.js" type="text/javascript"></script> 2.jQurey的语法:通过$(要选取的元素) 定义响应ajax的Servlet String buttonName=request.getParameter("buttonN

  • jQuery+Ajax实现用户名重名实时检测

    利用jQuery框架,封装了底层的Ajax异步技术,通过简单的方法调用即可实现.这篇博客是针对用户注册时出现的用户名重名问题的自动检测,利用的技术是Ajax异步传输. register.jsp 注册显示页面 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM

  • JQuery发送ajax请求时中文乱码问题解决

    这篇文章主要介绍了JQuery发送ajax请求时中文乱码问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 先排除项目故障: 1.web.xml中是否配置了字符拦截器 <filter> <filter-name>encodingFilter</filter-name> <filter-class>org.springframework.web.filter.CharacterEncodingFilter

  • jquery ajax 检测用户注册时用户名是否存在

    首先需要一个添加年级的页面,暂时叫grade.htm 这个文件需要引入两个文件jquery.js(jquery框架文件)和grade.js(验证的单独文件). 下面的input用于输入用户名字,id="gradeInfo"是为了显示提示信息用的. grade.htm 复制代码 代码如下: <input type="text" size="6" name="NAME" id="NAME"/><

  • jquery+ajax实现异步上传文件显示进度条

    前言: 今天项目中加了一个上传文件加进度条的需求,我就搞了一下.时间宝贵不多说,直接进入正题. 异步上传文件是要用到ajax里的一个小的知识点:xhr(XML Http Request)一个对象,xhr对象也是ajax一个核心. 关于使用它也很简单:就四步(下面这样写也可以向后端进行发送请求) var xhr=new XMLHttpRequest()//创建xhr对象 xhr.open('请求方式','请求的地址') xhr.send()//发佛那个请求 xhr.onreadystatechan

  • Asp.net下利用Jquery Ajax实现用户注册检测（验证用户名是否存）

    Asp.net下利用Jquery Ajax实现用户注册检测（验证用户名是否存）

    其中用到了jquery插件来验证用户名哦,这里是利用jquery ajax来验证用户名是否存在哦.大家看看效果图,后面将附上源码下载. jquery框架实现的ajax 验证用户名是否存在的部分JS 复制代码 代码如下: $("#accounts").formValidator({onshow:"请输入用户名",onfocus:"用户名至少4个字符,最多10个字符",oncorrect:"该用户名可以注册"}).inputVal

  • Jquery ajax书写方法代码实例解析

    Ajax在前端的应用极其广泛,因此,我们有必要对其进行总结,以方便后期的使用. AJAX优点: 可以异步请求服务器的数据,实现页面数据的实时动态加载, 在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容. jquery在全局对象jquery(也就是$)绑定了ajax()函数,可以处理Ajax请求,ajax常用的配置选项有: async 是否异步执行,默认为True,千万不要指定为False method 发送的Method,缺省为"GET",可指定为'POST','P

  • php+jQuery ajax实现的实时刷新显示数据功能示例

    本文实例讲述了php+jQuery ajax实现的实时刷新显示数据功能.分享给大家供大家参考,具体如下: 创建数据表:demo -- -- 表的结构 `demo` -- CREATE TABLE IF NOT EXISTS `demo` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(20) COLLATE utf8_bin NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CH

  • JQuery Ajax如何实现注册检测用户名

    Ajax(无需等待直接向服务器发起请求) (Asynchronous Javascript And Xml) :异步的 Google创新的一种js技术 方法一:比较原始没有封装的方法: //核对用户名是否可用 var xmlhttp = null; function checkUser(userName) { if (xmlhttp == null) { xmlhttp = new XMLHttpRequest();//第一步:创建一步通信对象 } //第二步:设定回调函数 xmlhttp.on

  • AJAX应用实例之检测用户名是否唯一(实例代码)

    AJAX应用实例之检测用户名是否唯一(实例代码)

    先给大家展示下效果图,然后再给大家撸代码,效果图如下所示: 下面写一个简单的例子,检测用户名是否唯一(直接撸代码): 前端界面: <%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transition

  • AJAX实现无刷新检测用户名功能

    AJAX实现无刷新检测用户名功能

    先来看看原理图 register.php <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ajax无刷新检测</title> <style type="text/css"> body{margin:0;padding:0;}.content{width:800px;margin:0 auto;}ul,li{l

  • AJAX实现注册验证用户名

    AJAX实现注册验证用户名

    本文实例为大家分享了AJAX实现注册验证用户名的具体代码,供大家参考,具体内容如下 功能说明 当用户在注册页面输入用户名并且鼠标焦点离开输入框时,到数据表中去验证该用户名是否已经存在,如果存在提示不可用,否则,提示可用. 接口 public interface UserDao { public User findName(String name); } 接口实现类 import java.sql.Connection; import java.sql.PreparedStatement; imp

  • PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程

    PHP+Ajax检测用户名或邮件注册时是否已经存在是论坛或会员系统中常见的一个重要功能.本文就以实例形式简单描述这一功能的实现方法.具体步骤如下: 一.PHP检测页面 check.php页面代码如下: <script type="text/javascript" src="jiance.js"></script> <form name="myform" action="" method="

  • JQuery+Ajax+Struts2+Hibernate框架整合实现完整的登录注册

    JQuery+Ajax+Struts2+Hibernate框架整合实现完整的登录注册

    最近在仿造一个书城的网站: http://www.yousuu.com ,UI直接拿来用,前端后端自己写,目前大部分功能已经实现, 就把具体的 登录注册功能 拿来分享一下.PS:又写登录注册会不会被人喷啊=.= 一.开发环境的部署 程序结构: BootStrap+Ajax+Struts2+Hibernate+MySql 仅供参考:能实现相关功能即可 操作系统:ubuntu 14.10 前端框架:BootStrap   注:此框架只是为了实现用户界面,和具体功能无关 数据库:mysql-5.5 数

  • 利用Ajax检测用户名是否被占用的完整实例

    适合人群:Ajax和jQuery入门 采用Ajax实现用户名验证 使用jQuery给出提示信息 用户注册的时候,使用Ajax实现检测用户名是否已经被注册过,很多细节没有实现,给大家做个简单普及. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//

  • ajax 检测用户名是否被占用

    复制代码 代码如下: //检测用户名是否被占用 function GetO(){ var ajax=false; try { ajax = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { ajax = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) { ajax = false; } } if (!ajax && typeof X

  • jquery+ajax实现注册实时验证实例详解

    本文实例讲述了jquery+ajax实现注册实时验证.分享给大家供大家参考,具体如下: 当我们注册一个用户时,会实时提示该用户的信息是否可用,这就是ajax的应用,很久以前就看过这个实现了,今天又看了一遍,给记录下来O(∩_∩)O哈! 先介绍下ajax中$.get,由于$.post用法和$.get大同小异就不再介绍了: 这是一个简单的 GET 请求功能以取代复杂 $.ajax .请求成功时可调用回调函数.如果需要在出错时执行函数,请使用 $.ajax. 复制代码 代码如下: $(selector

随机推荐