ajax請求, 前后端, 代碼示例

【博客園cnblogs筆者m-yb原創，轉載請加本文博客鏈接，筆者github: https://github.com/mayangbo666，公眾號aandb7，QQ群927113708】

https://www.cnblogs.com/m-yb/p/9965238.html

ajax是一種前端異步發送請求數據到后端,進行數據交互的手段,前端頁面使用ajax需要依賴jQuery的js庫.

比如前端頁面提交form表單的數據的ajax請求代碼片段示例:

點擊登錄按鈕,觸發onlick函數 login()

<script>
    function login() {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/login",
            data: {
                loginCode: $("#loginCode").val(),
                password: $("#password").val()
            },
            success: function (dataResult) {
                if (!dataResult.success){
                    alert(dataResult.message);
                    return false;
                }
                alert("登錄成功");
                window.location.href = "/toMainPage";
            },
            error: function (XMLHttpResponse) {
                
            }
        });
    }
</script>

后端的AjaxVO代碼:

public class AjaxVO {

    private boolean success;

    private String message;

    private Object data;

    private AjaxVO(){

    }

    private AjaxVO(boolean success, String message, Object data){
        this.success = success;
        this.message = message;
        this.data = data;
    }

    public static AjaxVO success(){
        return new AjaxVO(true, null, null);
    }

public static AjaxVO success(){
    return new AjaxVO(true, null, null);
}

public static AjaxVO success(Object data){
    return new AjaxVO(true, null, data);
}

public static AjaxVO failed(String message){
    return new AjaxVO(false, message, null);
}

public boolean isSuccess() {
    return success;
}

public String getMessage() {
    return message;
}

public Object getData() {
    return data;
}

}

使用時, 如果后端需要返回無數據體的成功狀態就調用

AjaxVO.success();

如果后端需要返回有數據體的成功狀態就調用

AjaxVO.success(Object data);

返回失敗信息:

AjaxVO.failed(String message);
【注】:
需要解析json的依賴,本文使用了jackson:
需要 引入Jackson Core, Jackson Databind,Jackson Annotations三個mavenjar包依賴.