<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>ajax</title>
    <script src="/ajax/js/jquery-3.3.1.min.js"></script>
  </head>
  <body>
  <form action="http://www.ubfgho.com/" method="post">
    姓名：<input type="text" name="name"><span></span><br>
    密码：<input type="password" name="psw"><br>
    <input type="submit" value="提交"><br>
  </form>
  </body>
  <script>
    /*前端form表单提交的是整个页面，进入servlet，利用Jquery实现前台验证，做非空验证
    利用Ajax实现异步请求，不需要跳转页面，判断姓名是否重名：
      1、创建发送异步请求的对象req
      2、准备发送：请求方式get、post  路径url  是否为异步true
      3、执行发送
    */
    //js实现get方式的异步请求:
    //发送
    $(':text').blur(function () {
        var name1=$(this).val().trim()//获取参数与name1
        var req=new XMLHttpRequest();//创建发送异步请求的req
        req.open("GET","/ajax/login?name="+name1,true)//准备发送
        req.send()
        //接收：发送不可能马上接受，这里需要设置状态时机成熟才去接收服务器的响应文本
        /*
          readyState:
        * 0表示请求未初始化
        * 1服务器已建立连接
        * 2请求已接收
        * 3请求处理中
        * 4请求已完成，且响应就绪
        * status：200表示OK  404表示未找到页面
        * */
        req.onreadystatechange=function () {
            if (req.readyState==4&&req.status==200){
                //req.responseText;//response接收后台响应的text
                $('span').html(req.responseText)//赋值给span标签

            }
        }
    })

    //1、失去焦点事件--判断姓名是否为空
    $(':text').blur(function () {
        var v=$(this).val()
        if (v.trim()==""){
            $("span").html("姓名为空").css("color","red")
        }else{
            $("span").html("")//清空span
        }
    })
    //2、提交事件---点击提交按钮触发submit
    $("form").submit(function () {
        //选中text文本
        var v=$(':text').val().trim();
        if (v==""){
        //如果姓名为空。就返回false，阻止提交，
            return false
        }
    })

  </script>
</html>

Ajax:实现后台验证js实现get方式的异步请求，判断用户名是否重复的更多相关文章

  1. js实现post方式的异步请求

    <%@ page contentType="text/html;charset=UTF-8" language="java" %><html& ...

  2. MVC中使用JQuery方式进行异步请求和使用自带方式进行异步请求

    在MCV中使用异步请求可以很很高效地进行前台和后台的数据传递,在这里,笔者为初学者介绍两种在MVC中常用的异步请求处理方式. 在这里,我们通过在一个页面中放置一个按钮来异步获取当前服务器端的系统时间为 ...

  3. [js开源组件开发]network异步请求ajax的扩展

    network异步请求ajax的扩展 在日常的应用中,你可能直接调用$.ajax是会有些问题的,比如说用户的重复点击,比如说我只希望它成功提交一次后就不能再提交,比如说我希望有个正在提交的loadin ...

  4. ajax技术实现登录判断用户名是否重复以及利用xml实现二级下拉框联动，还有从数据库中获得

    今天学了ajax技术,特地在此写下来作为复习. 一.什么是ajax? 客户端(特指PC浏览器)与服务器,可以在[不必刷新整个浏览器]的情况下,与服务器进行异步通讯的技术  即,AJAX是一个[局部刷新 ...

  5. js：如何在循环异步请求的每次返回中添加想要的值

    先看一个场景 var arr = ["a","b","c"]; for (var i in arr) {         $.get(&qu ...

  6. jquery ajax异步请求

    得先知道后台接口给ajax访问(接口URl和传入接口的参数及参数类型),知道访问之后返回的数据类型,有哪些数据.   选择异步请求的方式,常用的有三种,如$.ajax().$.post().$.get ...

  7. ajax 异步请求 代码

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. jQuery基础（Ajax，load()，getJSON()，getScript()，post()，ajax()，同步/异步请求数据）

    1.使用load()方法异步请求数据   使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:   load(url,[data],[callba ...

  9. 前端总结·基础篇·JS（四）异步请求及跨域方案

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

随机推荐

  1. Ubuntu找不到stdio.h等头文件_安装c库_build-essential安装失败解决

    最近安装的Ubuntu1804系统,vim.gcc都是现安的,用gcc编译时出现找不到头文件情况: 于是百度. 原来linux类的操作系统上面开发程序,光有了gcc 是不行的,它还需要一个 build ...

  2. CVPR 2019轨迹预测竞赛冠军方法总结

    背景 CVPR 2019 是机器视觉方向最重要的学术会议,本届大会共吸引了来自全世界各地共计 5160 篇论文,共接收 1294 篇论文,投稿数量和接受数量都创下了历史新高,其中与自动驾驶相关的论文. ...

  3. Tomcat系列（二）- EndPoint源码解析

    在上一节中我们描述了Tomcat的整体架构, 我们知道了Tomcat分为两个大组件,一个连接器和一个容器. 而我们这次要讲的 EndPoint的组件就是属于连接器里面的. 它是一个通信的端点,就是负责 ...

  4. JavaScrip 之 DOM

    DOM 树 HTML 文档的骨干是标签. 根据文档对象模型(DOM),每个HTML标签都是一个对象,同样标签内的文本也是一个对象.因此这些对象都可通过 JavaScript 操作 如果文档中有空格(就 ...

  5. JS---案例：点击按钮摇起来 & 星星闪动 （挺难看的）

    案例1:点击按钮摇起来 思路: 1. 2张图片,放进div里面,摇起来的本质是,此div按上下左右的位置和在一定的时间内发生移动 2. 所以用随机数的概念来实现位置的移动,用setInterval来实 ...

  6. 前端小白webpack学习（二）

    前一篇写了自我总结的webpack定义:为JavaScript服务的静态模块打包器 和几大基本概念 entry.output.plugins.loaders等.指路前端小白webpack学习(一) 下 ...

  7. Node.js / Python 日志

    一.Node.js 日志 1.原生 Node.js 原生方法其实很简单,就四个: // 输出到 stdout console.log() console.info() = console.log() ...

  8. ASP.NET Core 2.x 到 3.1 迁移指南

    一.前言 今日(2019/12/4).NET Core 3.1 正式发布了,ASP.NET Core 3.1 随之发布,这次 3.0 到 3.1经过了两个月的短周期,并没有增加重大的功能,主要是对 3 ...

  9. Spark Streaming任务延迟监控及告警

    概述 StreamingListener 是针对spark streaming的各个阶段的事件监听机制. StreamingListener接口 //需要监听spark streaming中各个阶段的 ...

  10. JPA的entityManager的find、getReference、persisit、remove方法的使用

    场景 JPA入门简介与搭建HelloWorld(附代码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103473937 ...