AjaxOptions.HttpMethod = GET 结果方法=POST答案

【问题标题】：AjaxOptions.HttpMethod = GET results in method=POSTAjaxOptions.HttpMethod = GET 结果方法=POST
【发布时间】：2019-02-08 11:51:24
【问题描述】：

我有以下AjaxOptions 对象：

AjaxOptions ajaxOpts = new AjaxOptions
{        
    HttpMethod = "Get",
    InsertionMode = InsertionMode.Replace
};

在视图中我有这个表单：

@using (Ajax.BeginForm("GetPeopleData", ajaxOpts))
{
    <div>            
        <button type="submit">Submit</button>
    </div>
}

这会产生以下 HTML：

<form action="/People/GetPeopleData" data-ajax="true" data-ajax-method="Get" id="form0" method="post">
    <div>            
        <button type="submit">Submit</button>
    </div>
</form>

当我提交表单时，我可以看到发送了一个 GET 请求。

为什么 HTML 有 data-ajax-method="Get" 和 method="post"？ method="post" 的目的是什么？

【问题讨论】：

因为Ajax.BeginForm不显眼（如果用户禁用了javascript，它会进行正常提交，默认情况下BeginForm()会生成method="post"）

标签： asp.net ajax asp.net-mvc asp.net-mvc-5 asp.net-ajax

【解决方案1】：

@Ajax.BeginForm() 助手利用 jQuery 不显眼的 AJAX 库。如果您检查帮助程序返回类型，它会返回 System.Web.Mvc.Html.MvcForm，与创建 <form> 标签的 @Html.BeginForm() 相同的返回类型：

public static MvcForm BeginForm(
    this AjaxHelper ajaxHelper,
    AjaxOptions ajaxOptions
)

由于它的所有重载都没有在 System.Web.Mvc.FormMethod 枚举中指定 HTTP 请求的参数，因此它使用默认的 POST 请求，就像 @Html.BeginForm() 一样，因此如果不妨碍 AJAX，它也会为默认表单方法写入 method="post"脚本在客户端被禁用。

data-ajax-method 属性的目的是在启用非侵入式 AJAX 时覆盖默认提交请求行为，因为它的值由 AjaxOptions.HttpMethod 属性设置，并由非侵入式 AJAX 库中的 asyncRequest() 方法检查（参见脚本的完整版本@ 987654326@):

function asyncRequest(element, options) {
    var confirm, loading, method, duration;

    confirm = element.getAttribute("data-ajax-confirm");
    if (confirm && !window.confirm(confirm)) {
        return;
    }

    loading = $(element.getAttribute("data-ajax-loading"));
    duration = parseInt(element.getAttribute("data-ajax-loading-duration"), 10) || 0;

    $.extend(options, {
        type: element.getAttribute("data-ajax-method") || undefined, // here AJAX method is checked (GET or POST)
        url: element.getAttribute("data-ajax-url") || undefined,
        cache: (element.getAttribute("data-ajax-cache") || "").toLowerCase() === "true",
        beforeSend: function (xhr) {
            var result;
            asyncOnBeforeSend(xhr, method);
            result = getFunction(element.getAttribute("data-ajax-begin"), ["xhr"]).apply(element, arguments);
            if (result !== false) {
                loading.show(duration);
            }
            return result;
        },
        complete: function () {
            loading.hide(duration);
            getFunction(element.getAttribute("data-ajax-complete"), ["xhr", "status"]).apply(element, arguments);
        },
        success: function (data, status, xhr) {
            asyncOnSuccess(element, data, xhr.getResponseHeader("Content-Type") || "text/html");
            getFunction(element.getAttribute("data-ajax-success"), ["data", "status", "xhr"]).apply(element, arguments);
        },
        error: function () {
            getFunction(element.getAttribute("data-ajax-failure"), ["xhr", "status", "error"]).apply(element, arguments);
        }
});

注意：您可以在this reference中看到与AjaxOptions的每个属性对应的属性列表。

【讨论】：