Ajax初体验

Ajax初体验

Controller

package com.mashiro.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

@Controller
@RequestMapping("/ajax")
public class AjaxTextController {


    @RequestMapping("/test.do")
    @ResponseBody()
    public String usernameShiro (@RequestParam(value = "username",required = false) String username, @RequestParam(value = "password",required = false) String password) {
        String msg = "";
        System.out.println("进入了usernameShiro方法！！！！！！！！！！！！！！");

        if (username != null){
            System.out.println(username);
            if (username.equals("admin")){
                msg = "ok";
            } else {
                msg = "用户名错误";
            }
        }

        if (password != null){
            System.out.println(password);
            if (password.equals("123456")){
                msg = "ok";
            } else {
                msg = "密码错误";
            }
        }
        System.out.println(msg);
        return msg;
    }
}

jsp

Javascript部分

<script src="${pageContext.request.contextPath}/js/jquery-3.0.0.min.js"></script> 
<script type="text/javascript">

      function a1() {
        $.ajax({
          url:"${pageContext.request.contextPath}/ajax/test.do",
          data:{"username":$("#username").val()},
          success:function (data) {
            if (data.toString() == 'ok'){
              $("#messageUsername").css("color","green");
            } else {
              $("#messageUsername").css("color","red");
            }
            console.log(data.toString());
            $("#messageUsername").html(data);
          }
        })
      }

      function a2() {
        $.ajax({
          url:"${pageContext.request.contextPath}/ajax/test.do",
          data:{"password":$("#password").val()},
          success: function (data) {
            if (data.toString() == "ok"){
              $("#messagePassword").css("color","green");
            } else {
              $("#messagePassword").css("color","red");
            }
            console.log(data.toString());
            $("#messagePassword").html(data);
          }
        })
      }
    </script>

Html部分

<form action="${pageContext.request.contextPath}/#" method="post">
      <p>
        用户名：<input type="text" id="username" οnblur="a1()"><span id="messageUsername"></span>
      </p>
      <p>
        密码：<input type="password" id="password" οnblur="a2()"><span id="messagePassword"></span>
      </p>
      <p>
        <input type="submit" name="提交">
      </p>
    </form>

Tips:

严格检查 Test Text 单词拼写！！！！！！！！！！！！！！！！！！！！！！！

严格检查 data date 单词拼写！！！！！！！！！！！！！！！！！！！！！！！