如何通过AJAX提交含100+字段的表单至MVC Action？

首先，你当前代码用了GET请求，这对100+字段的表单来说风险很高——大多数浏览器和服务器对GET请求的URL长度有默认限制（一般在2KB-8KB区间），这么多字段很容易超出限制，导致请求失败或数据丢失。所以第一步要把请求方式改成POST。

下面是两种适配大表单的提交方案，你可以根据自己的业务场景选择：

方式一：表单编码格式提交（最适配MVC默认处理） #

这种方式直接用jQuery的serialize()方法把表单转成MVC原生支持的application/x-www-form-urlencoded格式，后端可以直接用ViewModel或零散参数接收，无需额外配置，是最省心的方案。

修改后的JS代码 #

var LoadFilters = function (data) {
    var formData = null;
    if (!showAll) {
        // 用serialize()直接生成表单编码字符串，比serializeArray()更适配POST提交
        formData = $("#SearchForm").serialize();
        // 把buyerSk追加到表单数据里，也可以直接在表单里加隐藏字段<input type="hidden" name="buyerSk" />
        formData += "&buyerSk=" + encodeURIComponent(data);
    }

    var url = $.url("load-pp-transaction-filters"); // 去掉URL里的buyerSk拼接，统一放到data中传递

    $.ajax({
        type: "POST", // 核心修改：换成POST请求
        url: url,
        // jQuery会自动根据data类型设置contentType为application/x-www-form-urlencoded，无需手动指定
        data: formData,
        dataType: "html",
        success: function (msg) {
            $("#pp-transaction-filters").html(msg);
            // 这里补充你的后续业务逻辑
        },
        error: function(xhr, status, error) {
            // 增加错误处理，方便调试排查问题
            console.error("加载筛选器失败:", error);
        }
    });
};

对应的MVC Action示例 #

假设你用ViewModel统一接收表单数据：

// 定义和表单字段对应的ViewModel
public class TransactionFilterViewModel
{
    public int BuyerSk { get; set; }
    public string TransactionNumber { get; set; }
    // ... 这里补充你100+个表单字段对应的属性
}

public ActionResult LoadPPTransactionFilters(TransactionFilterViewModel model)
{
    // 处理你的业务逻辑
    return PartialView("PPTransactionFilters", model);
}

如果不想用ViewModel，也可以直接用零散参数接收：

public ActionResult LoadPPTransactionFilters(int buyerSk, string transactionNumber /* 其他表单字段参数 */)
{
    // 处理逻辑
    return PartialView(...);
}

方式二：JSON格式提交（适合复杂嵌套模型） #

如果你的表单对应复杂的嵌套ViewModel，或者需要更灵活的数据结构，可以把表单转成JSON字符串提交，后端用[FromBody]属性接收。

修改后的JS代码 #

var LoadFilters = function (data) {
    var formData = {};
    if (!showAll) {
        // 把serializeArray()的结果转成JSON对象，兼容多值字段（比如复选框）
        var formArray = $("#SearchForm").serializeArray();
        $.each(formArray, function() {
            if (formData[this.name]) {
                if (!Array.isArray(formData[this.name])) {
                    formData[this.name] = [formData[this.name]];
                }
                formData[this.name].push(this.value || '');
            } else {
                formData[this.name] = this.value || '';
            }
        });
        // 添加buyerSk字段
        formData.buyerSk = data;
    }

    var url = $.url("load-pp-transaction-filters");

    $.ajax({
        type: "POST",
        url: url,
        contentType: 'application/json; charset=utf-8', // 必须设置这个 contentType
        data: JSON.stringify(formData), // 把对象转成JSON字符串
        dataType: "html",
        success: function (msg) {
            $("#pp-transaction-filters").html(msg);
        },
        error: function(xhr, status, error) {
            console.error("加载筛选器失败:", error);
        }
    });
};

对应的MVC Action示例 #

public ActionResult LoadPPTransactionFilters([FromBody] TransactionFilterViewModel model)
{
    // 处理业务逻辑
    return PartialView(...);
}

额外注意事项 #

• 服务器端请求长度限制：如果表单数据特别大，需要在web.config里调整请求长度上限：

  <system.web>
      <httpRuntime maxRequestLength="1048576" /> <!-- 单位KB，这里设置为1GB -->
  </system.web>
  <!-- IIS 7及以上版本还需添加下面的配置 -->
  <system.webServer>
      <security>
          <requestFiltering>
              <requestLimits maxAllowedContentLength="1073741824" /> <!-- 单位字节，对应1GB -->
          </requestFiltering>
      </security>
  </system.webServer>
  

• 字段名称匹配：确保表单里的<input name="xxx">和ViewModel的属性名称匹配（MVC支持驼峰/ PascalCase的自动映射）。
• 调试技巧：可以在浏览器开发者工具的Network标签里查看请求的Form Data/Payload，确认数据是否正确传递到后端。

内容的提问来源于stack exchange，提问作者user7745736