Question

这是我的观点

 <div>
    @using ( Html.BeginForm("jQueryPost", "Home",null, FormMethod.Post, new { id="FormPost" }))
    { 
    @Html.TextBoxFor(x=> x.Name)<br />
    @Html.TextBoxFor(x => x.LastName)<br />
    @Html.TextBoxFor(x => x.Age)
    <input type=submit value="submit" />
    }
</div>

<script>

    $(document).ready(function () {
        $('#FormPost').submit(function (e) {
            //This line will prevent the form from submitting
            e.preventDefault();
            alert('ajax post here');

            $.ajax({
                type: 'POST',
                url: $('FormPost').attr('action'),
                data: $('FormPost').serialize(),
                accept: 'application/json',
                error: function (xhr, status, error) {
                    alert('error: ' + xhr.statusText);
                },
                success: function (response) {
                    alert('resp: ' + response.data);
                }
            });
        });


    });

 </script>

这些是家庭控制器的方法：

public ActionResult Index()
{
    return View();
}


[AcceptVerbs(HttpVerbs.Post)]
public JsonResult jQueryPost(IndexVM vm)
{
    IndexVM _vm = vm;
    return Json("name posted was: " + _vm.Name);

}

这是路线图

 routes.MapRoute(
        name: "Default",
        url: "{controller}/{action}/{id}",
        defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
    );

当页面加载时，它转到Index动作方法，这是可以理解的。但是，当我提交表单时，它将再次转到Index操作方法。那是为什么？

显示警告消息'ajax post here'，然后显示成功警报（'resp：'+ response.data）。但是，由于我没有在索引中返回任何内容，因此我会在警告框中找到一个resp：undefined。

如何修复此问题，以便表单帖子转到public JsonResult jQueryPost(IndexVM vm)方法？我也尝试将JsonResult替换为ActionResult并且表现相同。

Answer 1

您忘记了jQuery选择器中的#：

$.ajax({
    type: 'POST',
    url: $('#FormPost').attr('action'),
    data: $('#FormPost').serialize(),
    accept: 'application/json',
    error: function (xhr, status, error) {
        alert('error: ' + xhr.statusText);
    },
    success: function (response) {
        alert('resp: ' + response.data);
    }
});

jquery ajax post在MVC 4中使用了错误的action方法

1 个答案: