ajax簡單使用_2

設置前端的一個失去焦點的方法 input的id是loginName   用戶名爲空span是id loginnameResult 

ajax是使用的 jquery封裝的ajax方法

 

通過get方法 查找用戶名

查找密碼是使用的post方法

兩個代碼如下：

$(document).ready(function () {

    /*查詢關於登錄用戶名的Ajax方法*/
    $("#loginName").blur(function () {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "/user/searchName?loginName=" + $("#loginName").val(),
            success: function (data) {
                if (data.success) {
                    $("#loginNameResult").html(data.msg);
                } else {
                    $("#loginNameResult").html("出現錯誤:" + data.msg);
                }
            },
            error: function (jqXHR) {
                alert("發生錯誤:" + jqXHR.status)
            }
        });
    });

    /*查詢關於登錄密碼的Ajax方法*/
    $("#loginPWD").blur(function () {
        $.ajax({
            type: "POST",
            url: "/user/searchPwd",
            dataType: "json",
            data: {
                loginPWD: $("#loginPWD").val(),
            },
            success: function (data) {
                if (data.success) {
                    $("#loginPWDResult").html(data.msg);
                }
            },
            error: function (jqXHR) {
                alert("發生錯誤:" + jqXHR.status)
            }
        });
    });

});

後臺：

就是正常獲取參數來進行處理就好 （未展示實際業務邏輯）

@CrossOrigin //跨域
@Controller
@RequestMapping("/user")
public class UserController {

    private static Logger logger = LoggerFactory.getLogger("UserController");

    @GetMapping("/login")
    public String login(HttpServletRequest httpServletRequest) {
        if (httpServletRequest.getSession().getAttribute("admin")!=null){
            logger.info(httpServletRequest.getRemoteHost()+"當前已登錄了賬號");
            return  "/user/myAdmin";
        }
        return "/user/login";
    }

    @GetMapping("/searchName")
    @ResponseBody
    public Map<String,Object> search(@RequestParam("loginName") String loginName) {
        Map<String,Object> res = new HashMap<>();

        if ("".equals(loginName)){
            res.put("success","false");
            res.put("msg","用戶名爲空");
        }else {
            res.put("success","true");
            res.put("msg","");
        }
        return res;
    }

    @PostMapping("/searchPwd")
    @ResponseBody
    public Map<String,Object> searchPwd(@RequestParam("loginPWD") String loginPWD) {
        Map<String,Object> res = new HashMap<>();

        if ("".equals(loginPWD)){
            res.put("msg","密碼爲空");
            res.put("success","false");
        }else {
            res.put("msg","");
            res.put("success","true");
        }
        return res;
    }