<%@ 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. 【并发编程】Java并发编程传送门

    本博客系列是学习并发编程过程中的记录总结.由于文章比较多,写的时间也比较散,所以我整理了个目录贴(传送门),方便查阅. [并发编程系列博客传送门](https://www.cnblogs.com/54 ...

  2. 微信小程序视图层介绍及用法

    一. 视图层 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 1.1. 数据绑定 1.1.1. 普通写法 <vi ...

  3. OA表单制作（致远）

    第一步.导入已经制作好的xnl表单文件. 第二步.对每个字段设置相关属性. 1.设置文本属性,录入类型选择文本框. 2.设置日期属性,录入类型选择日期控件. 3.设置引用类型,录入类型选择关联表单-- ...

  4. Cesium 本地部署案例

    众所周知,cesium的服务器是搭建在国外的,所以我们国内的用户访问的时候贼慢.有时想查个api或者看个案例半天都进不去,今天我来说一下傻瓜式搭建本地的cesium环境,用于大家没事查资料用!步骤:1 ...

  5. 3.Android-ADT之helloworld项目结构介绍

    1.helloworld项目结构如下图所示: src 放项目的源代码的.而MainActivity.java文件则对应helloworld界面代码,代码如下所示: gen BuildConfig.ja ...

  6. acwing 861. 二分图的最大匹配 模板

    地址  https://www.acwing.com/problem/content/description/863/ 给定一个二分图,其中左半部包含n1n1个点(编号1~n1n1),右半部包含n2n ...

  7. （好文转载与总结）Windows10安装ubuntu18.04

    Windows10中安装Ubuntu,期间踩了非常多的坑,最终安装成功了,梳理下来Windows10装Ubuntu的步骤还是比较简明的. 制作Ubuntu系统U盘 Windows磁盘为新系统进行分区, ...

  8. python批量插入数据到es和读取es数据

    一.插入数据 1.首先准备类似如下数据 {"_type": "type1", "_id": 1, "_index": & ...

  9. 操作系统——输入输出(I/O)管理

    目录 一.I/O 管理概述 1.1 I/O 控制方式 1.2 I/O 软件层次结构 二.I/O 核心子系统 2.1 I/O 调度概念 2.2高速缓存与缓冲区 2.3设备分配与回收 2.4假脱机技术(S ...

  10. 使用python的一些笔记

    语法 传值与传引用 Python参数传递采用的是"传对象引用"的方式.这种方式相当于传值和传引用的一种综合. 如果函数收到的是一个可变对象(比如字典或者列表)的引用,就能修改对象的 ...