asp.net MVC 响应 jQuery AJAX 请求

Question

我在 razor .cshtml 文件中有以下代码。单击一个按钮应该会触发一个 ajax GET 请求，该请求应该会弹出一个警报，其中包含服务器返回的任何数据。 （下面的JS在document.ready中）

    $("#ajax-form").click(function () {

        alert("event fired");

        $.ajax({
            url: '/apartments/getData',
            type: 'GET',
            dataType: "text",
            success: function (data) {
                alert(data);
            },
            error: function (data) {
                alert("Error");
            }
        });
    });

以及查看代码：

<div class="row">
    <form id="ajax-form">
        <input type="submit"/>
    </form>
</div>

这是控制器代码：

    [HttpGet]
    public string getData()
    {
        return "Some dummy data here";
    }

事件确实在触发，但请求失败（错误函数触发）。我也无法让它与 $.post 或 $.get 一起使用。同时输入 localhost:54637/apartments/getData 会打开一个页面，其中显示“这里有一些虚拟数据”。

有什么想法吗？是否有某种特殊的方式必须设置 asp.net MVC 路由才能响应 AJAX 请求？

Answer 1

你可以使用表单submit事件，当表单提交时会发送ajax请求：

$(document).ready(function(){  

$("#ajax-form").submit(function () {

        alert("event fired");

        $.ajax({
            url: '@Url.Action("getData","apartments")',
            type: 'GET',
            dataType: "html",
            success: function (data) {
                alert(data);
            },
            error: function (data) {
                alert("Error");
            }
        });
    });
});

或者你可以像这样使用提交按钮click事件：

$(document).ready(function(){  

$('#ajax-form input[type="submit"]').click(function () {

        alert("event fired");

        $.ajax({
            url: '@Url.Action("getData","apartments")',
            type: 'GET',
            dataType: "html",
            success: function (data) {
                alert(data);
            },
            error: function (data) {
                alert("Error");
            }
        });
    });
});

更新：

您可以通过这种方式通过 ajax 发布表单：

$(document).ready(function(){  

    $("#ajax-form").submit(function (e) {
     var form = $(this);
            alert("event fired");

            $.ajax( {
      type: "POST",
      url: form .attr('action'),
      data: form.serialize(),
      success: function( response ) {
        console.log( response );
      }
    } );

       e.preventDefault(); //STOP default action
       e.unbind(); //unbind. to stop multiple form submit.
        });
});