Question

对于长篇帖子感到抱歉，我的问题有点难以制定。在尝试进行AJAX调用时，我遇到了一种奇怪的行为。在我的网站上，我有一个按钮，允许用户使用REST API调用从我的数据库中删除一些数据。当我直接在我的html文件中的<script>标记内进行调用时，一切都按预期工作。正在进行删除调用以按预期地处理http://0.0.0.0:8080/v1/item/id1

<script>
  $("#removeButton").click(function(e){
    bootbox.confirm("Are you sure?", function(result) {
    if (result == true){
      $.ajax({
        type: "DELETE",
        async: true,
        contentType: "application/json",
        url: "/v1/item/" + itemID,    
            dataType: "json",    
            success:function(result){               
            location.reload()
        },
        error:function(){
          $("#removeButton").notify("Error in removing item", "error");
        }
        }); 
    }
    else{
      console.log("false");
    }
  });
</script>

但是，我正在尝试摆脱html文件中的大部分javascript代码，并将大部分代码放到外部.js文件中。当我把AJAX调用放在外部js文件中的函数时，AJAX url在某种程度上是重复的。它会尝试拨打电话0.0.0.0:8080/v1/item/http://0.0.0.0:8080/www/item/id1。正确的网址应为0.0.0.0:8080/v1/item/id1。 HTML文件位于0.0.0.0:8080/www/item/id1。我相信我使用的这种模态视图（bootbox.js）也可能是问题的根源。

以下是外部js-file buttons.js的内容：

function removeConfirmButtonPressed(){
  $.ajax({
    type: "DELETE",
    async: true,
    contentType: "application/json",
    url: "/v1/items/" + itemID,   
        dataType: "json",    
        success:function(result){               
        location.reload()
    },
    error:function(){
      $("#removeButton").notify("Error in removing item", "error");
    }
  }); 
}

这是html文件：

<script>
  $(document).ready(function(){
    //event for clicking remove button
    $("#removeButton").click(function(e){
      bootbox.confirm("Are you sure?", function(result) {
      if (result == true){
        removeConfirmButtonPressed()
      }
      else{
        console.log("false");
      }
      });
    });
  });       
</script>

所以我的问题是，在用户确认他的选择是Bootstrap模态视图后，在从外部js文件进行AJAX调用时，是什么原因导致这个奇怪的url重复？

Answer 1

似乎itemID == "http://0.0.0.0:8080/www/item/id1"。您忘记只获取itemID对象的文本内容。

jquery ajax调用复制url，在模态视图后在外部js文件中调用

1 个答案: