【Ajax】实现注册页面判断用户名是否可用的提示—异步加载
- 效果如图
在注册或登录网站时，当我们输入错误格式的账号或信息时，会看到这种提示。
那怎么实现呢，通过ajax异步加载的方式，可以实现不刷新页面就显示出该提示。
- 实现
首先创建一个JSP，写一个简单的页面。
<body>
用户名：<input type="text" name="name" id="xxx"/><label></label><br>
年 龄：<input type="text" name="age"/><br> </body>
然后写一段jQuery函数
实现当用户不输入用户名，鼠标点击年龄输入框 或者 用户名输入不为指定的，则提示用户名输入错误/为空
<script type="text/javascript" src="<c:url value='/jquery-1.5.1.js'/>"></script><!-- 标签，需导入c标签库 -->
<script type="text/javascript">
$(function(){
$("#xxx").blur(function(){//当xxx失去焦点时
var value = $("#xxx").val();//获取id为xxx的元素
$.ajax({
url:"/Tool_Test/AjaxServlet",//要请求服务器URL
data:{val:value},//这是一个对象，它表示请求参数 服务器端可以使用request。getParamet() 来获取
async:true,//是否为异步请求
cache:false,//是否缓存结果
type:"POST",//请求方式
dataType:"json",//服务器返回的数据是什么类型 json:接收一个对象
success:function(result){//这个函数会在服务器执行成功时被调用，参数result就是服务器返回的值
if(result){
$("label").text("正确");
}else{
$("label").text("不能为空/输入错误");
}
}
});
});
});
</script>
当然最后要来一个Servlet
public class AjaxServlet extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String value = request.getParameter("val1");//在adjx的data中进行设置
if(value.equals("zhengbin")){
//用jquery的 ajax回调函数 返回的值就是 print中的字符串
response.getWriter().print("true");
}else{
response.getWriter().print("false");
}
}
}
- 实现效果
【Ajax】实现注册页面判断用户名是否可用的提示—异步加载的更多相关文章
- C# winform页面可视化设计打开失败，提示未能加载程序集或他的一个依赖项，dll错误
这种情况发生在最初项目是x86属性,改成x64后,一些原来dll,页面没有及时更新,导致页面找不到dll, 最简单的解决方式,把项目属性改成AnyCpu,重新编译下,就可以打开可视化设计窗口了.
- Django商城项目笔记No.7用户部分-注册接口-判断用户名和手机号是否存在
Django商城项目笔记No.7用户部分-注册接口-判断用户名和手机号是否存在 判断用户名是否存在 后端视图代码实现,在users/view.py里编写如下代码 class UsernameCount ...
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- 使用Ajax异步加载页面时，怎样调试该页面的Js
前言-本人不是干前端的,所以有的名词不专业 在前端中,有时候会遇到这样的框架,http://172.17.11.151:8060/frontend/backend.html#1.html (通过解析U ...
- Ajax 异步加载
AJAX (Asynchronous JavaScript and XML,异步的 JavaScript 和 XML).它不是新的编程语言,而是一种使用现有标准的新方法,是在不重新加载整个页面的情况下 ...
- Ajax 滚动异步加载数据
第一种情况:单个div滚动 HTML <body> <!-- search start --> <div class="search" #if($m_ ...
- 动态html,异步加载页面的处理
Selenium 基本使用 # 导入 webdriverfrom selenium import webdriver# 调用键盘按键操作时需要引入的Keys包from selenium.webdriv ...
- 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]
/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...
- Scrapy爬取Ajax（异步加载）网页实例——简书付费连载
这两天学习了Scrapy爬虫框架的基本使用,练习的例子爬取的都是传统的直接加载完网页的内容,就想试试爬取用Ajax技术加载的网页. 这里以简书里的优选连载网页为例分享一下我的爬取过程. 网址为: ht ...
随机推荐
- app被Rejected 的各种原因翻译
1. Terms and conditions(法律与条款) 1.1 As a developer of applications for the App Store you are bound by ...
- linux配置mysql,tomcat命令vi
[root@yangchehome bin]# ./mysqld_safe -user=mysql & [1] 17135 [root@yangchehome bin]# 140316 16: ...
- HDU4276 The Ghost Blows Light SPFA&&树dp
题目的介绍以及思路完全参考了下面的博客:http://blog.csdn.net/acm_cxlove/article/details/7964739 做这道题主要是为了加强自己对SPFA的代码的训练 ...
- SpingMVC ModelAttribute的用法
@Controller @RequestMapping(value = "/test") public class TestController { @RequestMapping ...
- TC SRM 605
Div2 AlienAndSetDiv2 1000 pts 题意:1~2N的数分成2个数组A,B,并且数组中按增序排列,同时满足|A[i] - B[i]| <= K,问有多少种方法? 分析 ...
- JS事件（事件冒泡和事件捕获）
事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用 ...
- String与StringBuilder
package com.wangzhu.string; /** * String类是final类,也就是说String类不能被继承,并且其成员方法都默认为final方法.<br/> * * ...
- lintcode ：Count and Say 报数
题目: 报数 报数指的是,按照其中的整数的顺序进行报数,然后得到下一个数.如下所示: 1, 11, 21, 1211, 111221, ... 1 读作 "one 1" -> ...
- 目标检测的图像特征提取之（三）Haar特征
1.Haar-like特征 Haar-like特征最早是由Papageorgiou等应用于人脸表示,Viola和Jones在此基础上,使用3种类型4种形式的特征. Haar特征分为三类:边缘特征.线性 ...
- 【Linux高频命令专题(22)】gzip
概述 减少文件大小有两个明显的好处,一是可以减少存储空间,二是通过网络传输文件时,可以减少传输的时间.gzip是在Linux系统中经常使用的一个对文件进行压缩和解压缩的命令,既方便又好用.gzip不仅 ...