springmvc 学习（六） AJAX 的简单使用，账号密码验证例子

简介

  • AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
  • AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
  • Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

利用AJAX可以做：

  • 注册时，输入用户名自动检测用户是否已经存在。
  • 登陆时，提示用户名密码错误
  • 删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。
  • ....等等

 

这里利用Ajax做一个登陆时提示用户名账号密码是否正确的例子

这里使用jquery提供的Ajax

jQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用！

下面是对应参数说明，这里我们需要掌握的是url，type，data,success,datatype

jQuery.ajax(...)
      部分参数：
            url：请求地址
            type：请求方式，GET、POST（1.9.0之后用method）
        headers：请求头
            data：要发送的数据
    contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
          async：是否异步
        timeout：设置请求超时时间（毫秒）
      beforeSend：发送请求前执行的函数(全局)
        complete：完成之后执行的回调函数(全局)
        success：成功之后执行的回调函数(全局)
          error：失败之后执行的回调函数(全局)
        accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型
        dataType：将服务器端返回的数据转换成指定类型
          "xml": 将服务器端返回的内容转换成xml格式
          "text": 将服务器端返回的内容转换成普通文本格式
          "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
        "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
          "json": 将服务器端返回的内容转换成相应的JavaScript对象
        "jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

首先对应的jsp页面的代码如下：

首先导入对应的jquery的包，这个可以在官网里下载

编写两个输入框，分别对应账号密码框

鼠标离开后触发函数 onblur="函数名" ，账号密码对应的函数分别是a()，b()

ajax 函数说明：

$.post（）代表ajax，里面写上面对应的参数内容

url 请求的地址，data 请求时带过去的参数，success 有个callback的返回参数，可以携带后端的返回信息


<html>
<head>
  <title>$Title$</title>
  <script src="${pageContext.request.contextPath}/status/jquery-3.6.0.js"></script>
  <script>

    function a(){
      $.post({
        url:"${pageContext.request.contextPath}/userPwd",
        data: {"username":$("#user").val()},
        success:function (data){
          if(data.toString()==="账号正确"){
            $("#msgUsername").css("color","green")
          }else {
            $("#msgUsername").css("color","red");
          }
          $("#msgUsername").html(data);
        }
      });
    }
    function b(){
      $.post({
        url:"${pageContext.request.contextPath}/userPwd",
        data: {"pwd":$("#pwd").val()},
        success:function (data){
          if(data.toString()==="密码正确"){
            $("#msgPwd").css("color","green")
          }else {
            $("#msgPwd").css("color","red");
          }
          $("#msgPwd").html(data);
        }


      });
    }
  </script>


</head>
<body>

<form action="#" method="post">
  账号 <input  type="text" id="user" onblur="a()" required/> <span id="msgUsername"></span> <br>
  密码 <input  type="password" id="pwd" onblur="b()"required /> <span id="msgPwd"></span> <br>
</form>
</body>
</html>

后端对应代码如下：

"/userPwd"对应上面js的请求路径url

username和pwd是前端请求的参数，这里没有使用数据库获取用户信息，直接使用admin和12346进行验证，并且放回一个参数为msg的数据。

@RequestMapping("/userPwd")
    public String userPwd(String username ,String pwd){
        String msg=null;
        if(username!=null&&username!=""){
            if(username.equals("admin")){
                msg="账号正确";
            }else {
                msg="账号错误";
            }

        }
        if(pwd!=null&&pwd!=""){
            if(pwd.equals("123456")){
                msg="密码正确";
            }else {
                msg="密码错误";
            }

        }
        return msg;
    }

测试如下：

 

 

posted @ 2021-09-07 11:45  黄易安  阅读(408)  评论(0)    收藏  举报