zoukankan      html  css  js  c++  java
  • 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包依赖.
  • 相关阅读:
    控制反转和依赖注入
    共识机制是什么?
    实用拜占庭容错算法PBFT
    三种框架对比react vue 和Angular对比
    go语言学习笔记
    激活方法总结
    钱包助记词
    简历中存在的问题的处理
    why we use Symbols in Hash
    compact过滤数组中的nil
  • 原文地址:https://www.cnblogs.com/m-yb/p/9965238.html
Copyright © 2011-2022 走看看