• 效果如图

　　

　　在注册或登录网站时，当我们输入错误格式的账号或信息时，会看到这种提示。

　　那怎么实现呢，通过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】实现注册页面判断用户名是否可用的提示—异步加载的更多相关文章

  1. C# winform页面可视化设计打开失败，提示未能加载程序集或他的一个依赖项，dll错误

    这种情况发生在最初项目是x86属性,改成x64后,一些原来dll,页面没有及时更新,导致页面找不到dll, 最简单的解决方式,把项目属性改成AnyCpu,重新编译下,就可以打开可视化设计窗口了.

  2. Django商城项目笔记No.7用户部分-注册接口-判断用户名和手机号是否存在

    Django商城项目笔记No.7用户部分-注册接口-判断用户名和手机号是否存在 判断用户名是否存在 后端视图代码实现,在users/view.py里编写如下代码 class UsernameCount ...

  3. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  4. 使用Ajax异步加载页面时，怎样调试该页面的Js

    前言-本人不是干前端的,所以有的名词不专业 在前端中,有时候会遇到这样的框架,http://172.17.11.151:8060/frontend/backend.html#1.html (通过解析U ...

  5. Ajax 异步加载

    AJAX (Asynchronous JavaScript and XML,异步的 JavaScript 和 XML).它不是新的编程语言,而是一种使用现有标准的新方法,是在不重新加载整个页面的情况下 ...

  6. Ajax 滚动异步加载数据

    第一种情况:单个div滚动 HTML <body> <!-- search start --> <div class="search" #if($m_ ...

  7. 动态html,异步加载页面的处理

    Selenium 基本使用 # 导入 webdriverfrom selenium import webdriver# 调用键盘按键操作时需要引入的Keys包from selenium.webdriv ...

  8. 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]

    /**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...

  9. Scrapy爬取Ajax（异步加载）网页实例——简书付费连载

    这两天学习了Scrapy爬虫框架的基本使用,练习的例子爬取的都是传统的直接加载完网页的内容,就想试试爬取用Ajax技术加载的网页. 这里以简书里的优选连载网页为例分享一下我的爬取过程. 网址为: ht ...

随机推荐

  1. java socket编程基础（转）

    一,网络编程中两个主要的问题 一个是如何准确的定位网络上一台或多台主机,另一个就是找到主机后如何可靠高效的进行数据传输. 在TCP/IP协议中IP层主要负责网络主机的定位,数据传输的路由,由IP地址可 ...

  2. cf 363A B C

    A水题 ~~  注意0输出 /************************************************************************* > Author ...

  3. 查看 dmp 字符集

    用Oracle的exp工具导出的dmp文件也包含了字符集信息,dmp文件的第2和第3个字节记录了dmp文件的字符集.如果dmp文件不大,比如只有几M或几十M,可以用UltraEdit打开(16进制方式 ...

  4. Iptables DDOS/CC 自动屏蔽脚本

    Iptables DDOS/CC 自动屏蔽脚本 May 20, 2013 最近不停地被 CC (DDOS的一种)频繁干扰,分享一个 iptables 屏蔽 DDOS 的脚本.让 crond 每分钟运行 ...

  5. Chp18: Hard

    18.1 Write a function that adds two numbers. You should not use + or any arithmetic operators. Solut ...

  6. qsort()与besearch()

    功 能: 使用快速排序例程进行排序 头文件:stdlib.h 用 法: void qsort(void *base,int nelem,int width,int (*fcmp)(const void ...

  7. sql中时间的比较方法

    --------------------------------------------------------------------1. 当前系统日期.时间select getdate() 2. ...

  8. Selenium--cssselector

        CSS(即层叠样式表Cascading Stylesheet) Selector来定位(locate)页面上的元素(Elements).Selenium官网的Document里极力推荐使用CS ...

  9. DML、DDL、DCL区别

    1.DML:数据操纵语言.执行完需要提交,有回滚. select.insert.update.delete.call explain plan :Oracle RDBMS执行每一条SQL语句,都必须经 ...

  10. lintcode：Compare Strings 比较字符串

    题目: 比较字符串 比较两个字符串A和B,确定A中是否包含B中所有的字符.字符串A和B中的字符都是 大写字母 样例 给出 A = "ABCD" B = "ACD" ...