Ajax:实现后台验证js实现get方式的异步请求，判断用户名是否重复

最新推荐文章于 2022-10-09 19:21:52 发布

weixin_30836759

最新推荐文章于 2022-10-09 19:21:52 发布

阅读量216

点赞数

原文链接：http://www.cnblogs.com/xiaoshenke/p/10996894.html

版权

<%@ 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>