jquery post 是 ajaxrequest 吗？

Question

我花了整整 3 个小时试图让它工作。我正在写一篇 jquery 帖子，但在某些地方我做错了一些事情，但我不明白是什么。

在我的方法中，我检查它是否是 ajax 请求，如果是，我根据结果返回一条字符串消息。

[HttpPost]
    public ActionResult PostJquery(ContactViewModel viewModel)
    {
        if (Request.IsAjaxRequest())
        {
            if (!string.IsNullOrEmpty(viewModel.Email))
            {
                return Content("success");
            }
            else
            {
                return Content("Fail");
            }   
        }
        else
        {
            return RedirectToAction("About");
        }
    }

我的 jquery 和 html 看起来像这样。

<% using (Html.BeginForm())
   {%>
<%: Html.TextBoxFor(model => model.Email) %>
<br />
<br />
<%: Html.TextBoxFor(model => model.Title) %><br />
<input type="submit" value="Save" id="button" />
<%} %>


<script src="<%= Url.Content("~/Scripts/jquery-1.5.2.js") %>" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {            
        $('#button').click(function (e) {
                            $.post('/Home/PostJquery', { viewModel: $('form').serialize() }, function (data) { alert(data); });                
        });
    });

</script>

它的作用是进入方法并重定向到网站，因为它不是 ajax 请求，如果我删除它，它会返回成功，但它会将我带到一个空白页面，其中写有成功文本。它不会触发警报成功。我可能做错了什么？我应该使用 .post 还是 .ajax？

感谢大家的意见

Answer 1

您需要取消按钮的默认操作，即通过返回 false 来提交表单：

$(function () {            
    $('#button').click(function() {
        $.post('/Home/PostJquery', $('form').serialize(), function (data) { 
            alert(data); 
        });
        return false;
    });
});

还要注意参数的传递方式。 .serialize() 方法已经准备好请求，因此您应该将其作为第二个参数发送。

但 AJAXify 表单的更好方法是订阅该表单的 .submit() 事件：

$(function () {            
    $('form').submit(function() {
        $.post(this.action, $(this).serialize(), function (data) { 
            alert(data); 
        });
        return false;
    });
});

更好的方法是使用 jquery 表单插件 它将您的代码转换为：

$(function () {            
    $('form').ajaxForm(function(data) {
        alert(data);
    });
});

备注：从 AJAX 请求返回时，请确保在服务器上设置正确的内容类型。