Question

每次用户在文本框中输入内容时，我都需要提交一个AJAX表单。

以下代码有效：

<% using (Ajax.BeginForm("myAction", "myController", null, new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "resultDiv" }, new { id = "myForm" }))
   {%>

<script type="text/javascript" language="javascript">
    jQuery("#myForm").keyup(function() { $('#myForm').trigger('onsubmit'); });
</script>

Search: <input type="text" id="myTextField" />

<%} %>

我一直在尝试更新代码，以便在提交表单时有1秒的延迟。延迟将允许仅在用户停止键入一秒间隔时才提交表单。此代码不起作用：

<% using (Ajax.BeginForm("myAction", "myController", null, new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "resultDiv" }, new { id = "myForm" }))
   {%>

<script type="text/javascript" language="javascript">
    var timerid;
    jQuery("#myForm").keyup(function() {
        clearTimeout(timerid);
        timerid = setTimeout(function() { $('#myForm').trigger('onsubmit'); }, 1000);
    });

</script>

Search: <input type="text" id="myTextField" />

<%} %>

关于如何延迟提交ajax表单直到用户在短时间内停止输入的任何建议？

更新：使用Chrome，我发现脚本在捕获的异常中停在MicrosoftAjax.js中的某个位置。我不知道如何找到异常的确切内容。

出于调试目的，我按如下方式重写了代码：

    var timerid;

    jQuery("#myForm").keyup(submitWithTimeout);

    function submitWithTimeout() {
        clearTimeout(timerid);
        timerid = setTimeout(submitAjaxForm, 2000);
    }

    function submitAjaxForm() {
        $('#myForm').trigger('onsubmit');
    }

代码在“submitWithTimeout”函数中执行两行，并准确等待2秒。它到达submitAjaxForm函数，并在MicrosoftAjax.js文件中的一个捕获的异常处停止，如前所述。

更新2 ：我现在正在使用MicrosoftAjax.js的调试版本，并找到了错误的来源。使用Chrome中的表达式观察器，我能够将其缩小到以下问题：“eventObject”变量在MicrosoftAjax.js执行时为null。我从源代码中收集的是，当使用计时器提交表单时，onsubmit代码的“event”为null。有什么想法吗？

<form action="myAction" id="myForm" method="post" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: 'myResult' });">

使用超时方法时，new Sys.UI.DomEvent(event)的“event”参数为空值。

Answer 1

我建议您使用TypeWatch jquery plugin，这样您就可以轻松实现这一目标。您的代码可能看起来像这样：

$("#myForm input").typeWatch({ 
    callback: function() { 
        $('#myForm').trigger('onsubmit');
    },
    wait: 1000,
    highlight: true,
    captureLength: 3
});

Answer 2

在尝试在一定延迟后提交 AJAX 表单时，似乎有一项特殊要求。

正如我在上一次更新中所提到的（请参阅问题），问题来自于在执行MicrosoftAjax.js库时未分配的event变量，尝试提交表单。 event变量具有触发表单提交的KeyboardEvent（或我想象的MouseEvent）。触发“keyup”事件时会分配此event变量，但在超时到期后不再可用，可能是因为范围丢失。

我的解决方法是将值存储在全局变量中，以便将事件数据重置为按下键时的状态。

因此，代码变为以下内容：

var timerid;
var timerEvent;

jQuery("#myForm").keyup(submitWithTimeout);

function submitWithTimeout() {
    clearTimeout(timerid);
    timerEvent = event;
    timerid = setTimeout(function() { submitAjaxForm(); }, 2000);
}

function submitAjaxForm() {
    event = timerEvent;
    $('#myForm').trigger('onsubmit');
}

ASP.NET MVC：AJAX提交表单有延迟

2 个答案: