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

您可以使用表单提交事件，在提交表单时会发送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");
            }
        });
    });
});

或者您可以使用提交按钮点击这样的事件：

$(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.
        });
});

asp.net MVC响应jQuery AJAX请求

1 个答案: