<%@ 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. SSM项目整合纪实

    一 前 言 本来是为了探究一些功能性问题,需要一套完整的项目架构,本以为SSM用过那么多了,轻松搭建不在话下,但是过程中还是遇到一些问题,踩到一些未曾料想的坑.博文以搭建极简架构为目的,附带一些关键阐 ...

  2. Java题库——Chapter17 二进制I/0

    Introduction to Java Programming 的最后一章,完结撒花!Chapter 17 Binary I/O Section 17.2 How is I/O Handled in ...

  3. 画线缩放、瞳距缩放、Line延长到指定长度，内附效果，源码供应，解压就跑

    前言 公司项目需要做个画线缩放,我司称之为瞳距缩放,简而言之就是:2张图,从第一张图画一条线,再从第二个图画一条线,第二条线以第一条为基准,延长到一致的长度,并同比缩放图片:文字太枯燥,请先实例图 例 ...

  4. AI: Web: 1 Vulnhub Walkthrough

    下载链接: https://www.vulnhub.com/entry/ai-web-1,353/ 主机发现扫描: 主机端口扫描 http://10.10.202.158/ 目录扫描: ╰─ sudo ...

  5. Linux中防火墙命令

    #启动   systemctl start firewalld #开机启动   systemctl enable firewalld #停止   systemctl stop firewalld #禁 ...

  6. oopday02(面向对象-构造方法&静态static)

    面向对象之封装 01_面向对象(构造方法Constructor概述和格式) * A:构造方法概述和作用 * 给对象的数据(属性)进行初始化 * B:构造方法格式特点 * a:方法名与类名相同(大小也要 ...

  7. Maven pom.xml文件深度学习

    本文介绍Maven项目构建中,pom.xml文件的生成规则和常用节点的使用方法.pom.xml官方网址:http://maven.apache.org/pom.html pom简介 pom作为项目对象 ...

  8. C#深入浅出之操作符和控制流程

    操作符 操作符简单举例就是生活中的+-*/等等运算符号,下面会详细讨论运算符内容. 一元正负操作符 有时候需要改变数值的正负号.一元操作符(-)可以使得数字的正负号改变. 例如:int a = -11 ...

  9. MyBatis框架之第三篇

    8.Spring与Mybatis整合 框架的整合就是软件之间的集成,它很抽象,因此在做整合之前先想好思路.规划好思路然后按照思路一步一步的做就可以实现框架的整合. 8.1.SM整合思路 8.1.1.思 ...

  10. report framework

    大标题 摘要: 关键字: 1 第一题:(爬虫) 1.1 问题分析及解题思路 本题需要爬取xxxx的数据,运用Python的Request爬虫框架 1.2 解题流程及代码 1.2.1定义爬虫类-构造函数 ...