正文
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包依赖.
