来自 MVC 4 中外部 JS 文件的 Ajax 调用

Question

我正在尝试通过外部 js 文件使用 ajax 检索有关选择国家/地区 ID 的城市数据，并注意我的代码在本地运行。 问题是当我使用内部 jquery 函数时，即在 MVC 视图中，我能够在选择国家时正确加载城市下拉列表，因为当我尝试使用单独的 JS 文件时，城市下拉列表没有被加载。

下面是 Ajax 调用..

$(document).ready(function () {

         $("#Country").change(function () {

             $.ajax({
                 type: 'POST',
                 url: '@Url.Action("GetCities")',
               data: { id: $("#Country").val() },
               success: function (data) {
                   $("#City").empty();
                   $("#City").append('<option value=" ' + 0 + ' ">' + "---Select---" + '</option>')
                   $.each(data, function (i, City) {
                       $("#City").append('<option value="' + City.value + '">' + City.Text + '</option>')
                   });
               }
           });
       })
    });

Answer 1

尝试调试代码并检查正确的 url 和参数发布到服务器。

$("#Country").change(function () {

 debugger;
  var dropdnSelectedVal = $(this).val();

     console.log(dropdnSelectedVal);

         $.ajax({
             type: 'POST',
              dataType: "json",
             url: '@Url.Action("GetCities")',//here is the issue, Its can not be parsed in external js file
           data: { id: $("#Country").val() },
           success: function (data) {

            debugger;
            var responseDataFromServer = data;
            console.log(data);
               $("#City").empty();
               $("#City").append('<option value=" ' + 0 + ' ">' + "---Select---" + '</option>')
               $.each(data, function (i, City) {
                   $("#City").append('<option value="' + City.value + '">' + City.Text + '</option>')
               });
           }
       });
   })
});

或者， 只需在浏览器网络选项卡上检查浏览器发布到服务器的参数数据