异步HTTP(ajax）请求在脚本标记中有效，但在js文件中无效

asynchronous HTTP (ajax) request works in script tag but not in js file

本文关键字：有效 但在 js 无效 文件 ajax HTTP 请求 脚本 异步      更新时间：2024-03-13

我在页面底部的脚本标记中有这个ajax调用。一切都很好！我可以在控制器中的"updatestatus"操作方法中设置断点。我的服务器也被发布了，这个方法被称为很棒！但是，当我将javascript放入js文件中时，ajax调用不会影响我的服务器。不过，里面的所有其他代码都在运行，只是没有对studentcontroller updatestatus方法进行ajax post调用。

<script>
$(document).ready(function () {
    console.log("ready!");
    alert("entered student profile page");
});
var statusdropdown = document.getElementById("enumstatus");
statusdropdown.addEventListener("change", function (event) {
    var id = "@Model.StudentId";
    var url = '@Url.Action("UpdateStatus", "Student")';
    var status = $(this).val();
    $.post(url, { ID: id, Status: status }, function (data) {
        // do something with the returned value e.g. display a message?
        // for example - if(data) { // OK } else { // Oops }
    });
    var e = document.getElementById("enumstatus");
    if (e.selectedIndex == 0) {
        document.getElementById("statusbubble").style.backgroundColor = "#3fb34f";
    } else {
        document.getElementById("statusbubble").style.backgroundColor = "#b23f42";
    }
}, false);
</script>

现在我把这个放在我的页面底部。

@section Scripts {
    @Scripts.Render("~/bundles/studentprofile")
}

在我的bundle.config文件中，它看起来像这个

bundles.Add(new ScriptBundle("~/bundles/studentprofile").Include(
            "~/Scripts/submitstatus.js"));

submittatus.js看起来是这样的。我知道它输入并运行这个代码，因为我看到了警报消息和背景颜色的变化。所以代码正在运行。它只是没有发回我的服务器。

$(document).ready(function () {
console.log("ready!");
alert("submit status entered");
var statusdropdown = document.getElementById('enumstatus');
statusdropdown.addEventListener("change", function (event) {
    var id = "@Model.StudentId";
    var url = '@Url.Action("UpdateStatus", "Student")';
    var status = $(this).val();
    $.post(url, { ID: id, Status: status }, function (data) {
        // do something with the returned value e.g. display a message?
        // for example - if(data) { // OK } else { // Oops }
    });
    var e = document.getElementById('enumstatus');
    if (e.selectedIndex == 0) {
        document.getElementById("statusbubble").style.backgroundColor = "#3fb34f";
    } else {
        document.getElementById("statusbubble").style.backgroundColor = "#b23f42";
    }
}, false);
});

在控制台窗口中，我收到了此错误消息。

岗位https://localhost:44301/Student/@Url.操作（%22更新状态%22，%20%22学生%22）404（未找到）

Razor代码未在外部文件中解析，因此在主视图中使用var id = "@Model.StudentId";将产生（例如）var id = 236;，在外部脚本文件中，它将产生var id = '@Model.StudentId';（值未解析）

您可以在主视图中声明变量

var id = "@Model.StudentId";
var url = '@Url.Action("UpdateStatus", "Student")';

外部文件将能够访问这些值（从外部脚本文件中删除以上2行），或者将它们添加为元素的data-属性，例如（我假设enumstatus是一个下拉列表？）

@Html.DropDownListFor(m => m.enumStatus, yourSelectList, "Please select", new { data_id = Model.StudentId, data_url = Url.Action("UpdateStatus", "Student") })

它将呈现类似的东西

<select id="enumStatus" name="enumStatus" data-id="236" data-url="/Student/UpdateStatus">

然后在外部文件脚本中，您可以访问值

var statusbubble = $('#statusbubble'); // cache this element
$('#enumStatus').change(function() {
  var id = $(this).data('id');
  var url = $(this).data('url');
  var status = $(this).val();
  $.post(url, { ID: id, Status: status }, function (data) {
    ....
  });
  // suggest you add/remove class names instead, but if you want inline styles then
  if (status == someValue) { // the value of the first option?
    statusbubble.css('backgroundColor', '#3fb34f');
  } else {
    statusbubble.css('backgroundColor', '#b23f42');
  };
});
相关文章：