用jquery ajax和mvc发布表单的正确方法是什么?

本文关键字:方法 是什么 表单 ajax jquery mvc 布表单 | 更新日期: 2023-09-27 18:04:43

关于如何做到这一点,我已经看到了几个方法。我自己的方法,我喜欢,除了从一个部分,是以下:

  1. 劫持提交-表单
  2. 事件
  3. 收集数据并构建json对象

    var objToSend = { Property : $('#propertyField').val(), Property2 : ... };
    

    这是我不喜欢的部分,因为像这样收集25个值很乏味

  4. 调用$.ajax({})并指定url指向某处启用[HttpPost]的动作

  5. 在ajax-query的success:部分中,收集返回的数据(我作为字符串返回)并在适当的地方将其写出来。我也在这里处理错误,检查第一个单词是否为"Error:",然后采取适当的行动。

我喜欢这种方法,除了收集阶段。我确信有更好的方法来做到这一点,但我已经把自己一头扔进了jquery,因为我来自ASP.NET的webforms背景,所以整个"拥抱网络"的部分对我来说完全陌生。

用jquery ajax和mvc发布表单的正确方法是什么?

您可以使用serialize()方法来避免逐个传递所有字段。它将使用application/x-www-form-urlencoded内容类型将整个表单数据发送到服务器,就像它是一个标准表单提交一样:

$('#myform').submit(function() {
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function(result) {
            // TODO: handle the success case
        }     
    });
    return false;
});
另一种可能是jQuery表单插件:
$('#myform').ajaxForm(function(result) { 
    // TODO: handle the success case
});

有些人发现使用Ajax.BeginForm帮助器来呈现表单也很有用:

@using (Ajax.BeginForm(new AjaxOptions { OnSuccess = "success" }))
{
    ... some input fields
}

在ASP。. NET MVC 3需要包含jquery.unobtrusive-ajax.js脚本,该脚本将Ajax helper发出的HTML 5 data-*属性低调地Ajax化。

允许jQuery为您构建json。你可以序列化一个表单,它将创建一个数据集供你提交。

$.post("myUrl", 
       $("form").serialize(), 
       function(callback) { ... } 
     );

我就是这么做的!

如果你正在处理一个表单,你也可以选择使用MVC帮助器为你创建邮政编码处理代码,例如

<% using (html.BeginForm()) {%>
    // html for the form

    <input type='submit' value='post' />
<% } %>

从WebForms到MVC的过渡可能是一个棘手的人,你真的是处理web编程的原始方面,即http, html和javascript…顺便说一句,我认为这是一件好事,因为我不是WebForms伪单进程事件模型的粉丝。

MVC万岁!:)

我倾向于使用"jQuery表单插件"。它允许您轻松地将标准表单抽象为AJAX表单:

http://jquery.malsup.com/form/

它还允许您轻松捕获各种事件、失败条件、验证等,并且可以根据需要将表单转换为JSON请求或XML。也处理文件上传