ajax异步校验用户名
来源:互联网 发布:js统计当前用户在线数 编辑:程序博客网 时间:2024/05/22 00:07
AJAX异步校验用户名
AJAX是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
在web开发中,经常会遇到需要发送局部请求,比如说验证用户名是否存在,获取手机验证码等,
单纯的验证用户名是否存在没有必要提交整个页面,这样有助于提升响应速度。
前端代码
<script type="text/javascript"> function getXhr() { var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else { xhr = new ActiveXObject("Microsoft.XMLHttp"); } return xhr; } function checkNameUnique() { var xhr = getXhr(); xhr.onreadystatechange = function () { if(xhr.readyState == 4&&xhr.status == 200){ document.getElementById("username_btn").value =xhr.responseText; } }; xhr.open("post","/checkNameUnique",true); xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); document.getElementById("username_btn").value = "正在验证"; var uname = document.getElementById("username_register").value; var username = (uname=='用户名')?'':uname; xhr.send("uname="+username); } <script> ...... <h2>注册 </h2> <form action="/register" method="post"> <div> <input class="username_register" name="username_register" id="username_register" value="用户名" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '用户名';}"> <input class="btn" type="button" id="username_btn" value="验证用户名" onclick="checkNameUnique()"/> </div> <input classs="tel" name="usrtel" value="手机号" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '手机号';}"> <div> <input class="content3" name="code" value="验证码" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '验证码';}"/> <button class="btn" onclick="false;" >获取验证码</button> </div> <input class="pwd_register" name="psw_register" value="密码" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '密码';}"> <input type="submit" class="register" value="注册"> </form>
后端代码
@RequestMapping(path = {"/checkNameUnique"},method = {RequestMethod.POST}) @ResponseBody private String checkNameUnique(@RequestParam("uname") String username){ return userService.checkUsername(username); }
调试的时候出现的问题
在调试的时候曾把xhr.open和xhr.setRequestHeader这两个函数顺序写反了,效果一直就出不来。
阅读全文
1 0
- AJAX用户名异步校验
- AJAX异步校验用户名
- ajax异步校验用户名
- Ajax结合SpringMVC进行用户名异步校验
- 使用Ajax完成用户名异步校验
- 案例:Ajax异步校验用户名是否存在
- Ajax完成用户名的异步校验
- 异步校验用户名是否存在(AJAX)
- 【项目实战】---使用ajax完成用户名是否存在异步校验
- ssh项目+jqueryeasyUI中ajax异步校验用户名
- 使用AJAX完成用户名是否存在异步校验:
- 使用AJAX完成用户名是否存在异步校验
- 使用AJAX完成用户名是否存在异步校验:
- JQuery+Ajax 使用JQuery完成异步用户名的校验
- Ajax异步请求-校验用户名的唯一性
- JQ对用户名异步校验(JQ的AJAX)
- 【SSH网上商城】使用AJAX异步加载校验用户名是否存在
- 异步校验用户名的实现
- Hadoop快速入门(1)
- Turtlebot入门-测试Kinect
- 学习c++50条建议
- h5全屏
- SpringMVC
- ajax异步校验用户名
- 论新手在开发项目中需要注意的一些事
- SVN项目提交设置忽略上传资源
- js多张图片循环平移
- L0、L1、L2范数学习笔记
- 二分查找及其变种总结
- Hadoop集群搭建(2)
- CSS3渐变(Gradients)
- 2017年深信服Android开发岗位笔试面试总结