<%@ 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. TP框架对数据库的操作

    1.添加数据       1.1添加一条数据 $user = new User; $user->name = 'thinkphp'; $user->email = 'thinkphp@qq ...

  2. 动态代理模式——JDK动态代理

    今天,我就来讲一下动态代理的设计模式. 动态代理的意义在于生成一个代理对象,来代理真实对象,从而控制真实对象的访问.操作动态代理需要两个步骤:一.代理对象和真实对象建立代理关系.二.实现代理对象的代理 ...

  3. Leetcode7 : Reverse Integer 整数反转问题

    问题描述 Example1: x = 123, return 321 Example2: x = -123, return -321 原题链接: https://leetcode.com/proble ...

  4. 【.net core 入坑】.net core 3.0 报错：在 FETCH 语句中选项 NEXT 的用法无效

    目录 1.事故现场: 2.分析及解决方案: 1.事故现场: 在项目中使用.net core 3.0,在EF链接sqlserver2008,在程序中使用了分页用的skip和take,程序报错: 在 FE ...

  5. shiro实战（1）--web

    目录结构:  数据库结构: 一·web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app ...

  6. ribbon客户端负载均衡

    Ribbon简介 参考:https://blog.csdn.net/chengqiuming/article/details/80711168 Ribbon是Netflix发布的负载均衡器,它有助于控 ...

  7. Windows CLI命令

    目录 Windows CLI命令 1.背景 2.netstat 罗列端口号占用情况 3.telnet 远端IP的某个端口号 Windows CLI命令 1.背景 在Windows操作系统下开发,需要用 ...

  8. Android 时间对话框 TimePickerDialog

    private int hourOfDay, minute; @Override protected void onCreate(Bundle savedInstanceState) { super. ...

  9. 【Beta阶段】第十一周Scrum会议

    [Beta阶段]第十一周Scrum会议 本次会议为第十一周第一次Scrum Meeting,会议对上周工作进行了总结,并对工作成果予以了肯定. 会议时间为2019.11.28.会议地点为中国海洋大学北 ...

  10. docker可视化工具Portainer部署与汉化

    为了更好的观察Docker运行状态,我们采用Portainer工具进行可视化,下面是部署过程总结: 环境: Liunx:CentOS Linux release 7.6.1810 (Core) Doc ...