用Ajax实现前端校验流程

最新推荐文章于 2022-11-21 15:46:04 发布

� 很皮很天真

最新推荐文章于 2022-11-21 15:46:04 发布

阅读量227

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lzhdekl/article/details/116333403

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

代码中jQuery用的3之后的版本
因为之前写ajax请求时老版本不识别这种写法搞了半天才发现是版本问题

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  
  </head>
  <body>
    <p>
      用户名:
      <input type="text" id="name" onblur="a1()"/>
      <span id="userInfo"></span>
    </p>
    <p>
      密码:
      <input type="text" id="pwd" onblur="a2()"/>
      <span id="pwdInfo"></span>
    </p>
    <script>
      function a1(){
        $.get({
          url: "http://localhost:8080/ajaxtest/login",
          data:{"name":$("#name").val()},
          success: function(data){
            if(data.toString()=='ok'){//信息核对成功
              $('#userInfo').css("color","green")
            }else{
              $('#userInfo').css("color","red")
            }
            $("#userInfo").html(data);
          }

        })
      }
      function a2(){
        $.get({
          url:"http://localhost:8080/ajaxtest/login",
          data:{"pwd":$("#pwd").val()},
          success: function(data){
            if(data.toString()=='ok'){//信息核对成功
              $('#pwdInfo').css("color","green")
            }else{
              $('#pwdInfo').css("color","red")
            }
            $("#pwdInfo").html(data);
          }
        })
      }
      function a3(){
      	
      }
    </script>
  </body>
</html>

效果
在这里插入图片描述
ajax写法总结

$.ajax({          
       	 url:"发送请求（提交或读取数据）的地址", 
         dataType:"预期服务器返回数据的类型",  
         type:"请求方式", 
         async:"true/false",
         data:{发送到/读取后台（服务器）的数据},
         success:function(data){请求成功时执行},      
         error:function(){请求失败时执行}
});