jQuery .load似乎在意料之外的时候运行了

Question

我正在尝试加载从.aspx页面返回的一些HTML，但在执行AJAX请求所依赖的操作之前需要触发点击事件。更具体地说，我正在做以下操作。当用户在文本字段中输入时，运行此函数...

function KeyPress() {
  $("#" + HiddenButtonId).click();
  $("#test").load("TempJumpToAJAX.aspx");
}

那么$("#" + HiddenButtonId).click();会在后台文件中设置一些会话数据。具体来说...

Session["SearchText"] = Search.Text;

然后，$("#test").load("TempJumpToAJAX.aspx"); 调用了一个 .aspx 页面，该页面返回一个新构建的选择框...

        Response.Expires = -1;

        StringBuilder builder = new StringBuilder();


        builder.Append("<select id=\"testListId\" name=\"testList\" size=\"4\" style=\"width:200px;\">");
        builder.Append("<option>");
        builder.Append(Session["SearchText"]);
        builder.Append("</option>");            
        builder.Append("</select>");

        Response.ContentType = "text/HTML";
        Response.Write(builder.ToString());
        Response.End();

问题在于，顺序似乎被搞混了，它会首先尝试附加Session["SearchText"]，然后才运行单击事件的代码。因此，它更像是这样的...

function KeyPress() {
  $("#test").load("TempJumpToAJAX.aspx");
  $("#" + HiddenButtonId).click();
}

命令被反转了。因此，实际上会发生的是会话变量具有空字符串，而不是用户在文本框中键入的内容。对我来说很奇怪的是它似乎不应该有一个空字符串，它似乎应该什么都没有，因为此时会话变量还未被初始化为任何值。我真的不知道发生了什么。也许这是因为经验不足。有什么想法吗？

- Carter

Answer 1

您在这里混合使用了技术。hiddenButtonID点击事件正在尝试为页面执行完整的回发(postback)，而AJAX调用不会进行回发(postback)。没有理由在执行回发(postback)之后再跟随一个AJAX调用。AJAX的目的是消除需要回发(postback)页面的需求，而是使用小回调来重新加载页面上少量的HTML。您应该将搜索文本框文本传递到AJAX调用参数中的服务器，而不是在HiddenButtonID点击事件处理程序中访问它。以下客户端脚本应该可以实现这一点。

function KeyPress() {
  $("#test").load("TempJumpToAJAX.aspx", {searchText: $("#").val()});
}

在这段代码中，您正在获取搜索文本框的ID，然后使用jQuery检索该文本框的值。这将作为POST变量传递到TempJumpToAJAX.aspx页面上，名称为'searchText'。您可以通过访问'TempJumpToAJAX.aspx'页面中的Request ['searchText']变量来访问此数据。

- Yobi21

Answer 2

你正在做的另一个聪明扩展是，不要在按下键时立即进行ajax调用。如果用户快速输入一个长单词，你将会得到多个ajax http请求，它们比返回和更新UI更快。

这会增加服务器负载，并可能使客户端的UI变得迟缓。

相反，在keypress事件中，存储所有适当的细节，然后调用

var timeout = setTimeout('some_method()',100);

它表示在100毫秒内调用some_method()。你应该在keypress方法中的第一件事就是使用clearTimeout取消/清除Timeout调用。

http://www.w3schools.com/js/js_timing.asp

some_method() 应该清除任何超时，然后进行 http ajax 请求。

这样做的效果是，您的 ajax 请求会稍微延迟一些时间，但如果用户按下另一个键，则不会发生。或者换句话说，在用户停止/暂停输入之前不要尝试触发 ajx 请求。100 毫秒可能太高或太低，但您应该明白我的意思！

您还应该注意处理“慢服务器”情况。考虑以下情况：

• 用户输入“hello”，暂停 1 秒钟，您使用“hello”作为参数触发 ajax 请求
• 用户继续输入“ world”，因此文本字段现在包含“hello world”，并停止输入。
• 您使用“hello world”作为参数触发第二个 ajax 请求。
• 第二个请求（针对“hello world”）先返回，您更新 UI
• 第一个请求（针对“hello”）返回，您再次更新 UI。

糟糕了！让服务器在返回给客户端的（json）数据中包含原始查询字符串。当客户端收到 ajax 数据返回时，请检查结果/数据是否与文本字段中当前匹配的查询（“hello”/“hello world”）相匹配。

- mintywalker

Answer 3

有一个 jQuery 插件可以封装前面回答所说的内容。它叫做 TypeWatch。它允许在用户停止输入文本字段一定毫秒数后触发函数。我以前用过它，效果非常好。

- Soviut

Answer 4

太棒了！感谢大家，你们的答案都非常有见地。我真正学到的问题是我不知道如何在那个ajax请求中发送变量。就是这里。

$("#test").load("TempJumpToAJAX.aspx", {searchText: $("#").val()});

还有，谢谢mintywalker的见解。一切都很好。

- Carter