<%@ 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" enctype="application/x-www-form-urlencoded">
    姓名：<input type="text" name="name"><span></span><br>
    密码：<input type="password" name="psw"><br>
    <input type="submit" value="提交"><br>
  </form>
  </body>
  <script>
      //js实现post方式的异步请求
      $(':text').blur(function () {
          var name1=$(this).val().trim()
          //1、创建发送异步请求的对象req
          var req=XMLHttpRequest();
          //2、准备发送
          req.open("POST","ajax/login",true)
          //3、设置请求头
          req.setRequestHeader("Content-type","application/x-www-form-urlencoded")
          //4、发送
          req.send("name"+name1)

          //回调参数
          req.onreadystatechange=function () {
              if (req.readyState==4&&req.status==200){
                  $("span").html(req.responseText).css("color","red")
              }
          }
      })

    //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>

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    String name=request.getParameter("name");
    boolean b=dao.selectName(name);
    String msg=b?"用户名已被占用":"用户名正常";
    response.setContentType("text/html;charset=UTF-8");
    response.getWriter().write(msg);
}
												


											
js实现post方式的异步请求的更多相关文章
	

    
								
  1. Ajax:实现后台验证js实现get方式的异步请求，判断用户名是否重复
		
    <%@ page contentType="text/html;charset=UTF-8" language="java" %><html& ...
    
		
    2. 
						
  2. MVC中使用JQuery方式进行异步请求和使用自带方式进行异步请求
		
    在MCV中使用异步请求可以很很高效地进行前台和后台的数据传递,在这里,笔者为初学者介绍两种在MVC中常用的异步请求处理方式. 在这里,我们通过在一个页面中放置一个按钮来异步获取当前服务器端的系统时间为 ...
    
		
    3. 
						
  3. [js开源组件开发]network异步请求ajax的扩展
		
    network异步请求ajax的扩展 在日常的应用中,你可能直接调用$.ajax是会有些问题的,比如说用户的重复点击,比如说我只希望它成功提交一次后就不能再提交,比如说我希望有个正在提交的loadin ...
    
		
    4. 
						
  4. js：如何在循环异步请求的每次返回中添加想要的值
		
    先看一个场景 var arr = ["a","b","c"]; for (var i in arr) {         $.get(&qu ...
    
		
    5. 
						
  5. 原生JS代码实现一个Ajax异步请求
		
    异步加载的方式 (1) defer,只支持IE (2) async: (3) 创建script,插入到DOM中,加载完毕后callBack 实现ajax之前必须要创建一个 XMLHttpRequest ...
    
		
    6. 
						
  6. jQuery基础（Ajax，load()，getJSON()，getScript()，post()，ajax()，同步/异步请求数据）
		
    1.使用load()方法异步请求数据   使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:   load(url,[data],[callba ...
    
		
    7. 
						
  7. jquery ajax异步请求
		
    得先知道后台接口给ajax访问(接口URl和传入接口的参数及参数类型),知道访问之后返回的数据类型,有哪些数据.   选择异步请求的方式,常用的有三种,如$.ajax().$.post().$.get ...
    
		
    8. 
						
  8. SpringBoot中异步请求和异步调用（看这一篇就够了）
		
    原创不易,如需转载,请注明出处https://www.cnblogs.com/baixianlong/p/10661591.html,否则将追究法律责任!!! 一.SpringBoot中异步请求的使用 ...
    
		
    9. 
						
  9. SpringBoot异步请求
		
    何为异步请求 在Servlet 3.0之前,Servlet采用Thread-Per-Request的方式处理请求,即每一次Http请求都由某一个线程从头到尾负责处理.如果一个请求需要进行IO操作,比如 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. flutter_boot android和flutter源码阅读记录
			
    版本号0.1.54 看源码之前,我先去看下官方文档,对于其源码的设计说明,文中所说的原生都是指android 看完官方文档的说明,我有以下几个疑问 第一个:容器是怎么设计的? 第二个:native和f ...
    
			
    2. 
						
  2. 基于H7的串口WIFI模块ESP8266的TCP客户端例子和操作说明（AP兼STA模式）
			
    说明: 1.如果不熟悉网络的话,等我这几天更新V7用户手册的ESP8266章节,如果熟悉的话,直接操作即可,这里将操作说明发出来. 2.串口WIFI是采用的AT指令操作,简单易用,指令手册在这个帖子里 ...
    
			
    3. 
						
  3. 第2章：C++泛型机制的基石：数据类型表——《C++泛型：STL原理和应用》读书笔记整理
			
    第二章:C++泛型机制的基石--数据类型表 2.1 类模板的公有数据类型成员 2.1.1 类的数据类型成员   C++类中不仅可以定义数据成员和函数成员,而且还可以定义数据类型成员.在泛型设计中,类的 ...
    
			
    4. 
						
  4. STL常用结构与方法简明总结
			
    C++常用的数据结构 序列式容器 vector(向量.有序数列),list(双向链表),deque(双端队列) 适配器容器 stack(栈),queue(队列) 关联式容器 map(映射.键值对二叉树 ...
    
			
    5. 
						
  5. Web安全测试学习笔记-DVWA-盲注(使用sqlmap)
			
    之前的sql注入页面(https://www.cnblogs.com/sallyzhang/p/11843291.html),返回了查询结果和错误信息.而下面的页面,返回信息只有存在和不存在两种情况, ...
    
			
    6. 
						
  6. 用Python6种方法：给定一个不超过5位的正整数，判断有几位
			
    方法一:作比较 a=int(input(">>>>")) if a<10: print(1) elif a<100: #第一个条件已经过滤了大于 ...
    
			
    7. 
						
  7. Flask 特殊装饰器
			
    请求进入函数之前 before_request # -*- coding: utf-8 -*-   from flask import Flask, session, redirect, reques ...
    
			
    8. 
						
  8. Ted:1 Vulnhub Walkthrough
			
    主机层面端口扫描: ╰─ nmap -p1-65535 -sV -A 10.10.202.134 Starting Nmap 7.70 ( https://nmap.org ) at 2019-08- ...
    
			
    9. 
						
  9. 【pycharm】Unable to save settings: Failed to save settings. Please restart PyCharm解决
			
    1.Unable to save settings: Failed to save settings. Please restart PyCharm解决 将工程的.idea目录删掉,重启pycharm ...
    
			
    10. 
						
  10. V4 Reduce Transportable Tablespace Downtime using Cross Platform Incremental Backup (Doc ID 2471245.1)
			
    V4 Reduce Transportable Tablespace Downtime using Cross Platform Incremental Backup (Doc ID 2471245. ...
    
			
    11.