主页 / 问题 / 924750
Accepted
Андрей
Asked:2020-12-24 15:55:42 +0000 UTC2020-12-24 15:55:42 +0000 UTC

使用其他按钮类型时未发送请求

  • 772

请告诉我为什么如果您使用Ajax.BeginForm，那么您需要使用提交类型的按钮来提交表单，如果您使用 jquery $.ajax，那么您只需按钮并且表单仍然可以。有什么区别？帮助代码：

<div>
    @using (Ajax.BeginForm("BookSearch", new AjaxOptions
    {
        UpdateTargetId = "results"
    }))
    {
        <input type="text" name="name" />
        <input type="submit" value="Поиск" />
    }
    <div id="results"></div>
</div>

带有 jquery 的代码：

<div>
    <input id="txt" type="text" name="name" />
    <input id="btn" type="button" value="Поиск" />
    <div id="results"></div>
</div>

@section scripts {
    <script type="text/javascript">
        $('#btn').on('click', function () {
            $.ajax({
                type: "POST",
                url: "/Home/BookSearch",
                data: { "name": $('#txt').val() },
                success: function (data) {
                    $('#results').html(data);
                },
                error: function (xhr) {
                    alert(xhr.status + 'Ошибка');
                },

            });
        });
    </script>
}

这就是这两个选项的工作方式，但如果在第一种情况下我还键入输入按钮，那么请求将不起作用。为什么？

c#

2 个回答

  1. Best Answer

    让我们先脱离ajax，转向常规的html表单。如果 Web 表单 ( <form></form>) 位于网页上，则所有 html 标准都表示该表单是通过单击 type=submit 的按钮来发送的，该按钮可以是多个。顺便说一句，在较新的标准中，提到不仅按钮可以是表单可提交元素。

    我没有看到在这方面偏离标准的浏览器，一切都很明显：点击提交按钮 - 表单已发送，其他一切都不会导致表单提交。

    您可以通过创建标记手动 ( <form method="...) 或使用 @Html.Form 表单帮助器在 asp.net mvc 中插入表单 - 它插入相同的<form ....

    这是此助手的源代码：

    public static MvcForm BeginForm(this HtmlHelper htmlHelper, string actionName, string controllerName, RouteValueDictionary routeValues, FormMethod method, IDictionary<string, object> htmlAttributes)
{
  ...
  return htmlHelper.FormHelper(url, method, htmlAttributes);
}

private static MvcForm FormHelper(this HtmlHelper htmlHelper, string formAction, FormMethod method, IDictionary<string, object> htmlAttributes)
{
  TagBuilder tagBuilder = new TagBuilder("form");
  tagBuilder.MergeAttributes<string, object>(htmlAttributes);
  tagBuilder.MergeAttribute("action", formAction);
  tagBuilder.MergeAttribute(nameof (method), HtmlHelper.GetFormMethodString(method), true);
  bool flag = htmlHelper.ViewContext.ClientValidationEnabled && !htmlHelper.ViewContext.UnobtrusiveJavaScriptEnabled;
  if (flag)
    tagBuilder.GenerateId(htmlHelper.ViewContext.FormIdGenerator());
  htmlHelper.ViewContext.Writer.Write(tagBuilder.ToString(TagRenderMode.StartTag));
  MvcForm mvcForm = new MvcForm(htmlHelper.ViewContext);
  if (!flag)
    return mvcForm;
  htmlHelper.ViewContext.FormContext.FormId = tagBuilder.Attributes["id"];
  return mvcForm;
}

internal static void EndForm(ViewContext viewContext)
{
  viewContext.Writer.Write("</form>");
  viewContext.OutputClientValidation();
  viewContext.FormContext = (FormContext) null;
}

    也就是说，写的时候没有什么特别的魔力@using(Html.BeginForm(...。我曾经回答过是否可以自己制作这样的助手的问题 - 原则上，您自己可以练习创建自定义助手。

    现在让我们回到 ajax。你用代码编写@using(Ajax.BeginForm(...——这个构造调用了一个类似的代码<form method="...，没有变化。

    重要的：

    让我们明确一点：提交表单仅在单击可提交元素时触发！

    不管你有没有ajax。

    但是你看，没有人会禁止你在任何表单元素上调用任何javascript 函数。您可以执行alert()or console.log()、为元素着色或触发淡入淡出效果。或者 - 打电话this.form.submit()好吧，甚至（原文如此！） - 向另一台服务器发出请求。实际上，您的第二个示例完全是这样的：您至少可以挂断对某些 ajax 请求 onMouseOver 或 onKeyUp 的调用，但将其挂在 onClick 事件上，您认为该事件是 onSubmit 事件（对于 type=submit 按钮，它确实是！）。好吧，表格不会被发送 - 好吧，没有必要，操作的执行方式几乎相同。

    纯粹是假设，我可以猜测它什么时候可以射击，但在实际练习中你不需要这样的情况，而且你不太可能会射中自己的脚。

    没有人阻止您制作两个按钮：

    • 提交按钮将向某个控制器发送一个请求，该控制器将解析数据，假设请求来自 application/x-www-form-urlencoded （这是大多数情况下发送表单的方式）
    • type=button 按钮将向其他操作发送请求，在 POST 请求中，数据将采用 json 格式（应用程序/json 类型）

    这里我们只分析了一个非常相似的情况，写的不是：

    $('#btn').on('click', function () {
            $.ajax({
                type: "POST",

    并且有类似的东西（那里使用了 axios 库，为了清楚起见，我给出了等价的）：

    $('#btn').on('click', function () {
            $.ajax({
                type: "POST",
                contentType:"application/json; charset=utf-8",

    最后，有几句话不是关于你所问的。编写 ajax 有一个非常常见的错误，您在第二个示例中犯了这个错误。

    考虑到“一切正常”和“无需提交表单”，一些站长编写了无效代码。根据 html 标准，输入和按钮元素只能放置在表单内。你哪里有她？一点也不。

    像这样正确：

    <div>
    <form ...>
        <input id="txt" type="text" name="name" />
        <input id="btn" type="button" value="Поиск" />
    </form>
    <div id="results"></div>
</div>

    关于“nenuacho，它有效”这一事实。我不会谈论布局是否必须有效 - 这是每个特定专家的良心，我会说人们经常会访问禁用 javascript 的网站。尽管禁用 js 的人不太可能有充分的机会使用该网站，但如果您有一个带有提交按钮的有效表单，该人仍然有机会填写表单并提交。如果您有输入和提交悬而未决的情况 - 没有。想想看。

    • 2

  2. 通过页面重新加载获取数据的表单

    用于动态渲染的Ajax Post 。

    这个问题之前已经解决了。

    • -1

相关问题