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 相关文章推荐
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
如何在vue 中引入使用jquery
Nov 10 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/07/28 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
php源码的使用方法讲解
2019/09/26 PHP
window.open不被拦截的实现代码
2012/08/22 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
JavaScript中输出标签的方法
2014/08/27 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
教你如何编写Vue.js的单元测试的方法
2018/10/17 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
Python获取apk文件URL地址实例
2013/11/01 Python
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
Python模块的制作方法实例分析
2019/12/21 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
创业计划书撰写原则
2014/01/25 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
空气的环保标语
2014/06/12 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
2015年工程部工作总结
2015/04/30 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书