无法在 .Net (C#) 中使用 ajax 发送基本的非 MVC 表单答案

【问题标题】：Can't send a basic, non MVC form using ajax in .Net (C#)无法在 .Net (C#) 中使用 ajax 发送基本的非 MVC 表单
【发布时间】：2017-09-04 07:50:01
【问题描述】：

这个问题的答案我看过很多次了，但是大部分都和MVC控制器有关。

我在尝试使用 Ajax 发送表单时遇到的问题是，在调试模式下，执行流程不会到达我在后面的代码中设置的断点。另外，我注意到当我点击提交按钮时，页面刷新得非常快；我认为 ajax 的整个想法是不刷新页面。

这是我的 index.aspx

<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script src="ajaxform.js" type="text/javascript"></script> 
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <fieldset class="fs1">

            <input id="inputData" tabindex="1" name="theinputData" class="field" placeholder="Paste URL, docId or docSetId" runat="server"/>
            <input id="form1Send" type="submit" class="button" onclick="submit()"/>

        </fieldset>
    </div>
    </form>
</body>

这是我的 ajaxform.js 的代码

 $(document).ready(function () {

     $('#form1').submit(function (e) {
         
         var formData = new FormData(this);

         $.ajax({
             url: 'index.aspx/OnSubmit',
             type: "POST",
             dataType: "json",
             contentType: "application/json; charset=utf-8",
             data: formData,
             contentType: false,
             processData: false,
             success: function (result) {
                 alert("We returned: " + result);
             },
             error: function (result) {
                 alert("Error");
             }
         });
         e.preventDefault();
     });
 });

最后，这是我的代码

namespace mySpace
{
   public partial class index : System.Web.UI.Page
   {
       protected void Page_Load(object sender, EventArgs e)
       {

       }

       [WebMethod]
       public static string OnSubmit()
       {
           return "I was in code behind";
       }

   }
}

我的断点在返回线上。为什么程序永远无法到达 WebMethod？

【问题讨论】：

将e.preventDefault();移动到函数的顶部。这有帮助吗？

标签： c# asp.net ajax forms

【解决方案1】：

您的代码有几个问题：

您重复声明了一些东西来处理表单。您的 form1send 按钮中包含 onclick="submit()" 以及您通过 jQuery 连接的表单提交处理程序
您的 JavaScript 处理程序的内容略有偏差，例如您设置了两次 contentType。

下面是 在我的机器上运行的 JavaScript 的简化版本：

 $(document).ready(function () {

     $('#form1').submit(function (e) {

         $.ajax({
             type: "POST",
             url: "index.aspx/OnSubmit",
             contentType: "application/json; charset=utf-8",
             data: '{}',
             dataType: "json",
             success: function (response) {
                 alert(response.d);
             },
             failure: function (response) {
             }
         });
         e.preventDefault();
     });
});

注意：我将此（$.ajax 调用的内容）基于我在其他地方找到的代码示例，这就是为什么参数和参数的顺序与您的不同。

如果您的应用程序存在 RouteConfig.cs 文件，如果您在浏览器开发人员工具控制台中看到 HTTP 401 错误以请求索引中的 WebMethod 修饰方法，则您可能还需要将 settings.AutoRedirectMode = RedirectMode.Permanent; 更改为 settings.AutoRedirectMode = RedirectMode.Off; .aspx.

【讨论】：

【解决方案2】：

通过在FormData(this) 之前执行event.preventDefault()，可以防止过早刷新。见下文：

$(document).ready(function () {
     $('#form1').submit(function (event) {
         event.preventDefault();
         var formData = new FormData(this);

         $.ajax({
             url: 'index.aspx/OnSubmit',
             type: "POST",
             dataType: "json",
             contentType: "application/json; charset=utf-8",
             data: formData,
             contentType: false,
             processData: false,
             success: function (result) {
                 alert("We returned: " + result);
             },
             error: function (result) {
                 alert("Error");
             }
         });
     });
 });

【讨论】：

你能解释一下你到底做了什么改变吗？
我在初始化 FormData 之前向上移动了 event.preventDefault()。这可以防止页面刷新。您是在 ajax 调用之后执行此操作的，因为页面会刷新，这可能会导致 ajax 调用突然终止。