jQuery .load 似乎在一个意想不到的地方运行

Posted 2023-04-13

【中文标题】jQuery .load 似乎在一个意想不到的地方运行

【英文标题】：jQuery .load seems to be running at an unexpected point

【发布时间】：2010-09-28 12:19:38

【问题描述】：

所以我正在尝试从 .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"]，然后运行 ​​click 事件运行的代码。所以它的功能更像这样......

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

命令颠倒的地方。所以实际上发生的是会话变量有一个空字符串，而不是用户在文本框中键入的内容。对我来说奇怪的是，它似乎不应该有一个空字符串，它似乎应该什么都没有，因为此时会话变量还没有被初始化为任何东西。我真的不知道发生了什么。我猜这归咎于缺乏经验。有什么想法吗？

【参考方案1】：

你在这里混合技术。 hiddenButtonID click 事件试图对页面进行完整的回发，而 AJAX 调用不会进行回发。没有理由回帖，然后通过 AJAX 调用跟进。 AJAX 的目的是消除回发页面的需要，而只需使用对服务器的小回调重新加载页面上的少量 HTML。您应该在 AJAX 调用参数中将该数据传递给服务器，而不是访问 HiddenButtonID click 事件处理程序中的搜索文本框文本。

下面的客户端脚本应该这样做。

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

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

【参考方案2】：

您正在做的另一个智能扩展是不要在按下键后立即进行 ajax 调用。如果用户快速输入长字，您将触发多个 ajax http 请求，其速度快于它们返回和更新 UI 的速度。

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

相反，onkeypress，存储所有适当的详细信息，然后调用

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”）匹配。

【参考方案3】：

有一个 JQuery 插件封装了前面的答案所说的内容。它称为TypeWatch。它允许在用户停止在文本字段中输入指定的毫秒数后触发函数。我以前用过，效果很好。

【参考方案4】：

太棒了！感谢大家，您的所有答案都非常有见地。我了解到的真正问题是我不知道如何使用该 ajax 请求发送变量。这里。

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

还有mintywalker，感谢您的洞察力。一切都很好。