首页 > 其他分享 >Ajax异步请求

Ajax异步请求

时间:2024-04-15 13:33:17浏览次数:28  
标签:异步 用户名 请求 获取 点击 输入框 Ajax 输入

1.需求

准备一个注册页面ajax.html,当鼠标点击输入框的时候提示“请输入用户名”,输入用户名后,点击输入密码或者其他空白处的时候提示“用户名可以使用”或者“用户名以重复,请重新输入用户名”。

1.1准备页面

image

1.2当鼠标点击输入框的时候提示“请输入用户名”

(1)根据id获得input标签,然后绑定获取焦点事件onfocus
(2)获取span标签并用innerHTML填入提示信息
image

1.3点击输入密码或者其他空白处的时候提示“用户名可以使用”或者“用户名以重复,请重新输入用户名”

(1)根据id获得input标签,然后绑定失去焦点事件onblur
image
(2)根据value获取输入框里的数据
image
(2)获取ajax对象
image
getXhr()方法写在回调函数外面
image
(3)准备请求(get)
image
(4)事件+回调函数(发送请求和响应都成功)
image
(5)发送请求
image
如果是post请求则在send方法里面填写参数“key=value”

请求的contoller为:

image

标签:异步,用户名,请求,获取,点击,输入框,Ajax,输入
From: https://www.cnblogs.com/lxs666/p/18135738

相关文章

  • hashchang事件是异步更新的
    1.代码//此时会触发hashchangelocation.hash='/test'window.addEventListener('hashchange',()=>{console.log('hashchenge')})//此时不会触发hashchangelocation.hash='/test'setTimeOut(()......
  • 异步函数
    0.为什么使用异步因为js本身是单线程,如果所有的任务都是同步的,那么一些非常耗时的任务就会严重影响到用户体验1.回调函数constfs=require('fs');functionread(fileName){fs.readFile(fileName,'utf-8',(err,data)=>{if(err){console.log('err'......
  • 推荐两款HTTP请求Mock利器
    1、背景在日常测试过程中或者研发开发过程中,目前接口暂时没有开发完成,测试人员又要提前介入接口测试中,测试人员不仅仅只是简单的编写测试用例,也可以通过一些mock的方法进行来提前根据接口测试的情况进行模拟返回接口的信息,进行模拟接口各种场景的异常。mock是指模拟,也就是模拟接......
  • JMeter——异步请求性能测试
    前段时间任务要求要对一种异步请求做性能测试,异步请求步骤如下:step1:发一个数据计算的请求,response里面返回一个jobIdstep2:带上这个jobId,就可以实时查看这个请求返回的jobStatus,如果jobStatus==0,则成功返回计算结果;如果jobStatus==2,则代表jobinprogress;如果jobStatus==......
  • RestTemplate进行https请求时适配信任证书
    转载请注明出处:1.http协议请求使用RestTemplate进行http协议的请求时,不需要考虑证书验证相关问题,以下为使用RestTemplate直接使用的代码示例:importorg.springframework.web.client.RestTemplate;importorg.springframework.http.ResponseEntity;importorg.spring......
  • 项目中统一处理请求中的字符串参数的空格
    测试controller@RestController@RequestMapping("/test")@Slf4jpublicclassTestController{@GetMapping("/testStringParamTrim")publicTestObjectInfotestStringParamTrim(@RequestParamStringgoodsId,StringgoodsName){......
  • IO模型和常见的异步IO应用场景
    常见的IO模型1.同步就是在发出一个功能调用时,在没有得到结果之前,该调用就不返回。等前一件做完了才能做下一件事情。就是我调用一个功能,该功能没有结束前,我死等结果。2.异步当一个异步过程调用发出后,调用者不能立刻得到结果。实际上处理这个调用的部件在完成之后,通过状态,通知......
  • Godot UI线程,Task异步和消息弹窗通知
    目录前言线程安全全局消息IOC注入消息窗口搭建最简单的消息提示简单使用仿ElementUIElementUI效果简单的Label样式如何快速加载多个相同节点修改一下,IOC按钮事件注册总结前言最近我在研究Godot的全局消息,然后发现Godot也是有UI线程限制的,只能在主线程的子线程里面修改UI。线......
  • 限制异步HTTP请求并发:简单、有效的20个并发下载控制策略
     概述:通过使用`SemaphoreSlim`,可以简单而有效地限制异步HTTP请求的并发量,确保在任何给定时间内不超过20个网页同时下载。`ParallelOptions`不适用于异步操作,但可考虑使用`Parallel.ForEach`,尽管在异步场景中谨慎使用。对于并发异步I/O操作的数量限制,可以使用SemaphoreSlim,......
  • SpingBoot项目Tomcat假死,导致http(openfeign)请求无法响应问题定位
    项目简介:<spring-boot.version>2.3.2.RELEASE</spring-boot.version><spring-cloud.version>Hoxton.SR12</spring-cloud.version>使用docker进行项目部署问题描述:项目中代码中大量使用异步多线程操作,没个异步过程中大量掺杂数据库查询、Redis查询、Feign调用、RabbitMq发送接收......