Question

我想弄清楚为什么要进行ajax POST调用以填充div的原因-当我从HTML文档的同一SCRIPT块中进行调用时，它显示得很好，但是我将相同的调用作为函数移到单独的.js文件中，DIV中没有任何内容。

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

以下工作（同一脚本块中的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（）与内联代码之间的区别。有人可以看到我在做什么吗？

Answer 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" alt="Loading..." /></div>')
            },
            success:  function(data){
                $(_dom_obj).html(data);
            }
        });
};

呈现ajax POST调用以填充DIV的问题

1 个答案: