<%@ 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. CSS flex 布局快速入门

    以前已经学过flex了,一直没做笔记,现在做下笔记再回忆下. 首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. ...

  2. PlayJava SSM框架简介

    SSM框架 SSM是Spring + Spring MVC + MyBatis的缩写,是一个继SSH之后目前比较主流的JavaEE框架,适用于搭建各种企业级应用系统. Spring Spring是一个 ...

  3. 墨者 - X-FORWARDED-FOR注入漏洞实战

    X-FORWARDED-FOR 首先,X-Forwarded-For 是一个 HTTP 扩展头部.HTTP/1.1(RFC 2616)协议并没有对它的定义,它最开始是由 Squid 这个缓存代理软件引 ...

  4. Intel和AMD的CPU性能对比图

    Intel和AMD的CPU性能对比图:

  5. Android 数据库 SQLiteOpenHelper

    public class DbOpenHelper extends SQLiteOpenHelper { private static String name = "test.db" ...

  6. Java多线程面试问答

    今天,我们将讨论Java 多线程面试问答. 线程是Java面试问题中的热门话题之一.在这里,我从面试的角度列出了大多数重要的Java多线程面试问题,但是您应该对Java线程有足够的知识来处理后续问题. ...

  7. 微信 电脑版 HOOK（WeChat PC Hook）- 技能点

    CE 扫描内存数据OD 动态分析代码IDA 静态分析代码汇编 阅读OD和IDA的代码 编写inline hookC/C++ 编写dll 编写主程序逻辑MFC 编写主程序界面 源码: https://g ...

  8. DDD 实战记录——实现「借鉴学习计划」

    「借鉴学习计划」的核心是:复制一份别人的学习计划到自己的计划中,并同步推送学习任务给自己,并且每个操作都要发送通知给对方. 它们的类图如下: 它们的关系是一对多: // Schedule entity ...

  9. 【译】gRPC vs HTTP APIs

    本文翻译自 ASP.NET Blog | gRPC vs HTTP APIs,作者 James,译者 Edison Zhou. 写在开头 现在,ASP.NET Core使开发人员可以构建gRPC服务. ...

  10. 痛苦的 java.net.BindException: Address already in use: connect —— Nacos的坑

    我的dubbo应用, 刚开始的时候,启动一两个是没有问题的, 启动多了就大量出现: -- :: --- [TaskScheduler-] o.s.c.a.nacos.discovery.NacosWa ...