为什么我的功能在没有警报的情况下停止工作？

Question

所以我认为这里有这个功能：

function izbrisi() {
        var b = document.getElementById('proizvod').value;
        {
            $.ajax({
                url: '@Url.Action("IzbrisiProizvod", "Proizvod")',
                data: { id: b }
            }).done(function () {
                alert('Izbrisan');
                });
            alert('Izbrisan');  @* bez ovoga se ne brise proizvod *@
        }
    }

它传递给的控制器：

public ActionResult izbrisiProizvod(int Id)
        {
            RadniProizvod.IzbrisiProizvod(Id);
            return View();
        }

最后是“IzbrisiProizvod”方法：

public void IzbrisiProizvod(int IdProizvoda)
        {
            Proizvod izbrisaniProizvod = azilEntities.Proizvods.FirstOrDefault(x => x.idProizvoda == IdProizvoda);
            azilEntities.Proizvods.Remove(izbrisaniProizvod);
            azilEntities.SaveChanges();
        }

无论出于何种原因，如果我不添加最终警报（有注释的警报），代码将无法正常工作。没有任何内容被删除，没有任何内容被报告给控制台。一旦我添加了最终警报，它就会神奇地开始工作。

谁能给我解释一下这个魔法？

Answer 1

根据文档，始终像这样编写您的 jquery 函数。 （always 是可选的）

// Assign handlers immediately after making the request,
// and remember the jqXHR object for this request
var jqxhr = $.ajax( "example.php" )
  .done(function() {
    alert( "success" );
  })
  .fail(function(jqXHR, textStatus, errorThrown) {
    alert( "error" );
  })
  .always(function() {
    alert( "complete" );
  });

所以在你的情况下：

function izbrisi() {
        var b = document.getElementById('proizvod').value;
        {
            $.ajax({
                url: '@Url.Action("IzbrisiProizvod", "Proizvod")',
                data: { id: b }
            }).done(function () {
                alert('Izbrisan');
            }).fail(function() {
                   alert( "error" );
            }).always(function() {
                   alert( "complete" );
           });
        }
    }

并且可能将警报更改为控制台日志或类似内容。

Answer 2

在您的浏览器开发工具中试用网络工具。例如Firefox Dev Tools。当您单击您的元素（比如说按钮）时，您应该在网络工具中的所有请求列表中看到新的 http 请求。如果你不这样做，那么你的 ajax 调用根本没有发生，或者它发生在上一页，因为你经历了页面重新加载。检查 Proizvod 是否真的被删除了。如果是，那么您的 js 函数可以工作，但您看不到响应。如果 Network 工具中有新的 http 请求，请稍微检查一下，看看发生了什么（只需单击它，在右侧您将看到详细信息）。

此外，您可以打开控制台，然后单击控制台中的 html 元素类型：izbrisi()。函数应该执行，如果它有效，您将在网络工具中看到一个新的 http 请求，并且您的 done 警报将弹出。如果是这种情况，那么您的 html 元素在单击事件上具有默认行为。所以你应该阻止它以防止页面重新加载。假设您使用一个按钮单击它。按钮 html 应如下所示：

<button onclick="izbrisi(e)">Izbrisi</button>

还有js函数：

function izbrisi(e) {
   e.preventDefault();
   // ... your code goes here
}

Answer 3

无论出于何种原因，如果我不添加最终警报（有注释的警报），代码将无法正常工作。没有任何内容被删除，没有任何内容被报告给控制台。一旦我添加了最终警报，它就会神奇地开始工作。

您的 ajax 仅包含 .done() 承诺回调。这只会在 ajax 请求收到 200 成功代码时执行。您可以在 .fail() 承诺中添加一个独特的警报，以查看正在发生的事情。

在您的代码中，无论如何都会触发最终警报。

试试这个以帮助了解发生了什么。使用这个fiddle 并打开你的控制台。请注意 .done() 和 .fail() 承诺中的不同警报消息。

  //var b = document.getElementById('proizvod')?.value;
  $.ajax({
    url: '@Url.Action("IzbrisiProizvod", "Proizvod")',
    data: {
      id: 'someData'
    }
  }).done(function() {
    alert('success');
  }).fail(function() {
    alert('error');
  });

  console.log('i fire no matter what');