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中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 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
使用无限生命期Session的方法
2006/10/09 PHP
php GUID生成函数和类
2014/03/10 PHP
自制PHP框架之设计模式
2017/05/07 PHP
javascript 函数式编程
2007/08/16 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
javascript中attachEvent用法实例分析
2015/05/14 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
Vue组件创建和传值的方法
2018/08/17 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
pycharm导入源码的具体步骤
2020/08/04 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
初中生操行评语大全
2014/04/24 职场文书
新品发布会策划方案
2014/06/08 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python