渲染 ajax POST 调用以填充 DIV 的问题

Posted

技术标签:

【中文标题】渲染 ajax POST 调用以填充 DIV 的问题【英文标题】:problem with rendering ajax POST call to populate DIV 【发布时间】:2019-10-14 13:11:50 【问题描述】:

我正在努力弄清楚为什么当我进行 ajax POST 调用以填充 div 时 - 当我从 html 文档的同一个 SCRIPT 块中进行调用时,它显示得很好,但只要我将相同的调用作为函数移到单独的 .js 文件中,在 DIV 中没有呈现任何内容。

我确定我只是忽略了一些东西,但无法弄清楚是什么???

以下 WORKS(同一脚本块中的 ajax 调用)

<div id="flow">
</div>

<script  type="text/javascript">
    $(document).ready(function() 

        $.ajax( "http://localhost:8680/jsdv-status-panel/tsv-multi-version",
            
                data: JSON.stringify(
                    
                        "some_json":
                                
                                    "id": 0,
                                    ...
                                
                    
                ),
                contentType: 'application/json',
                type: 'POST',
                success:  function(data)
                    $("#flow").html(data);
                
            );
    );
</script>
</body>
</html>

但是,如果我将调用移到单独的 .js 文件中的函数,它不会显示任何内容,即使我可以看到响应按预期返回(例如,DevTools 的网络选项卡正在查看对外部服务的调用我可以看到有效的 HTML 或预览)

以下内容不起作用(没有错误,但 DIV 中不显示任何内容)

<div id="flow">
</div>

<script type="text/javascript" src="assets/js/statusPanelMultiVersion.js"></script>

<script  type="text/javascript">
    $(document).ready(function() 


        statusPanelMultiVersion('#flow', 
                    
                        "some_json":
                                
                                    "id": 0,
                                    ...
                                
                    
         );
    );
</script>
</body>
</html>

statusPanelMultiVersion.js

function statusPanelMultiVersion(_dom_obj, _data_objects) 
     $.ajax( "http://localhost:8680/jsdv-status-panel/tsv-multi-version",
        
            data: JSON.stringify(_data_objects),
            contentType: 'application/json',                
            type: 'POST',
            dataType: 'json',
            success:  function(data)
                $(_dom_obj).html(data);
            
        );
;

有趣的是,我在一个执行 ajax GET 的外部文件中有一个类似的函数 - 它按预期工作(结果在 DIV 中呈现)

function statusPanelLastValue(_dom_obj, _params) 
    $.ajax( "http://localhost:8680/jsdv-status-panel/tsv-last-value" + _params,
        
            contentType: 'application/json',
            type: 'GET',
            success:  function(data)
                $(_dom_obj).html(data);
            
        );
;

这样称呼

 statusPanelLastValue("#pool", "?biglongquerystring");

我要么没有看到明显的东西,要么不理解进行 POST 调用的 function() 和内联代码之间的区别。谁能看到我做错了什么?

【问题讨论】:

你能添加错误吗:function(data) alert(data) - 你可能会遇到一个错误并且成功永远不会触发。如果出错,我们可以更好地调试。 一件事...如果您将 JSON 转储到 div 上,获取 JSON 的目的是什么?你确定你的 POST 返回一个 JSON 吗? 卡洛斯,你的问题提示我看到问题!我没有注意到请求中的 dataType 和 ContentType 不正确。如果您没有发布答案,不确定如何给您信用 【参考方案1】:

卡洛斯的问题让我看到了问题!

我没有注意到请求中的 dataType 和 ContentType 不正确。

现在可以使用了

function statusPanelMultiVersion(_dom_obj, _data_objects) 
    $.ajax( "http://localhost:8680/jsdv-status-panel/tsv-multi-version",
        
            data: JSON.stringify(_data_objects),
            dataType : "html",
            contentType: "application/json; charset=utf-8",
            type: 'POST',
            beforeSend:function(req) 
                $('#ajax-panel').html('<div class="loading"><img src="/assets/img/loading.gif"  /></div>')
            ,
            success:  function(data)
                $(_dom_obj).html(data);
            
        );
;

【讨论】:

以上是关于渲染 ajax POST 调用以填充 DIV 的问题的主要内容,如果未能解决你的问题,请参考以下文章

从 javascript 调用 XSLT

jqGrid 不填充数据

是否可以使用 jQuery 加密 AJAX 调用以进行身份​​验证?

进行 AJAX 调用以将下拉值传递给 python 脚本

对 Spring Boot 控制器的 Ajax 调用以重定向视图

AJAX 调用以检索 JSON - 如何将结果格式化为屏幕