前端调用后端方法，获得值后向前端赋值

最新推荐文章于 2024-12-19 20:42:35 发布

原创最新推荐文章于 2024-12-19 20:42:35 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用Ajax从后端获取数据并动态更新页面上仓库元素位置和尺寸的方法。通过解析返回的JSON数据，将仓库的左、顶、宽、高属性应用到对应的页面元素上，实现仓库布局的实时更新。

function getStoreHouseDate() {
        $.ajax({
            url: context_path + "后端方法路径",
            type: "post",
            dataType: "JSON",
            success: function (data) {  //data后端返回的值
                if (data != null) {
                    for (var i = 0; i < data.length; i++) {
                        $("#" + data[i].storeHouse).css({   //css样式赋值
                            'left': data[i].left + '%',
                            'width': data[i].width + '%',
                            'height': data[i].height + '%',
                            'top': data[i].top + '%'
                        });
                        
                         第一个xxx为页面中的值，后面两个xxx则是依据后台传来JSONArray中与第一个同对象的值
                        $("#" + data[i].XXX).html(data[i].XXX + '<img src=" XXX.png"/>');
                    }
                } else {
                    window.clearInterval(interval);
                    layer.msg("获取失败", {icon: 2, time: 1200})
                }
            }

        });
    }