Question

我遇到这个问题，我的get中的jQuery updateMyApps函数没有被正确调用。我在声明它之后立即调用该函数，并且该函数完美无缺。它遍历数据并将元素附加到DOM。

但是当我提交表单#addapplicationform时，它会运行正常工作的jQuery post函数，但updateMyApps函数在发生这种情况时似乎无法正常工作。

console.log("Test");似乎总是被召唤。即使提交表格。但由于某种原因，该get请求的回调函数仅在页面加载时被调用一次。

<script>
function updateMyApps() {
    console.log("Test"); //Always works
    $.get("/api/clients", function(data) {
        console.log(data); //Works first time
        $("#myapps").html("<h4>My Applications</h4>");
        data.forEach(function (item) {
            var element = '<div>' + item.name + '</div>' + '<div>' + item.id + '</div>' + '<div>' + item.secret + '</div>' + '<a href="/edit"><input type="submit" class="submit btn btn-primary form-control" value="Edit" style="width: 100px;"></a>';
            $("#myapps").append(element);
        });
    });
}
updateMyApps(); // Works perfectly

$("#addapplicationform").submit(function( event ) {
  event.preventDefault();
  $.post("/api/clients", $( "#addapplicationform" ).serialize(), function () {
    updateMyApps(); //Doesn't work
  });
});
</script>

关于get请求回调为什么只触发一次的任何想法？

修改

忘了提这个。看起来GET /api/clients仅在页面加载时被调用。提交表格时，它根本不会打到我的后端。

编辑2

意识到这是一个缓存问题。添加$.ajaxSetup({ cache: false });似乎解决了这个问题。同时将问题标记为重复我找到该代码段的位置。

Answer 1

尝试在提交中添加console.log。

<script>
function updateMyApps() {
    console.log("Test"); //Always works
    $.get("/api/clients", function(data) {
        console.log(data); //Works first time
        $("#myapps").html("<h4>My Applications</h4>");
        data.forEach(function (item) {
            var element = '<div>' + item.name + '</div>' + '<div>' + item.id + '</div>' + '<div>' + item.secret + '</div>' + '<a href="/edit"><input type="submit" class="submit btn btn-primary form-control" value="Edit" style="width: 100px;"></a>';
            $("#myapps").append(element);
        });
    });
}
updateMyApps(); // Works perfectly

$("#addapplicationform").submit(function( event ) {
  event.preventDefault();
  console.log("works!!!"); // <-- add this console.log
  $.post("/api/clients", $( "#addapplicationform" ).serialize(), function () {
    updateMyApps(); //Doesn't work
  });
});
</script>

jQuery AJAX只调用一次回调

1 个答案: