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


Posted in jQuery onSeptember 25, 2020

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如何实现注册检测用户名

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

方法二: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); //设置按钮不可用
          }

        }
      });
    }

运行效果和上面一样;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jQuery Tree Multiselect使用详解
May 02 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
使用jQuery实现购物车
Oct 29 jQuery
jQuery实现带进度条的轮播图
Sep 13 #jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 #jQuery
jQuery实现简单全选框
Sep 13 #jQuery
jQuery+ajax实现用户登录验证
Sep 13 #jQuery
jquery实现简易验证插件封装
Sep 13 #jQuery
jQuery实现朋友圈查看图片
Sep 11 #jQuery
jQuery实现日历效果
Sep 11 #jQuery
You might like
php 抽象类的简单应用
2011/09/06 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
封装的原生javascript弹出层代码
2010/09/24 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
异步动态加载js与css文件的js代码
2013/09/15 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
vue实现计步器功能
2019/11/01 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
建筑工程专业学生的自我评价
2013/12/25 职场文书
矫正人员思想汇报
2014/01/08 职场文书
小学生美德少年事迹
2014/02/02 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书