如何在 AJAX 调用后运行 javascript答案

【问题标题】：How to get javascript to run after AJAX calls如何在 AJAX 调用后运行 javascript
【发布时间】：2009-09-29 14:16:18
【问题描述】：

好的，前言：在 AJAX 和动态 Web 方面，我仍然是初学者。我的问题类似于下面的问题，但我认为讨论是使用框架，而我不是。

Potentially related post

这是我的场景：

我在一个表单中有几个选择元素。每次页面加载时都会填充初始选择的选项元素。后续选择的选项元素会根据用户在前一个选择中选择的内容来填充。所以它就像一条链子。通过进行 AJAX 函数调用（只是我自己的 javascript）来填充选择中的选项，然后调用 php 文件以从数据库中获取值并构建一个 responseText 来填充基于前一个选择中所做的选择的每个后续选择。希望这很清楚？所有这些都很好用。

我的问题从这里开始：

当用户提交表单时，运行一个 php 文件来处理数据，显示成功或任何问题，然后我将用户返回到表单页面。我想重新选择他们在提交之前选择的所有选项，因为其中一些是重复性任务，这将节省他们的时间。我的第一步是调用所需的 AJAX 函数来重新填充选择元素，然后我想我可以在表单页面中运行 javascript 来选择以前选择的选项。但是，当我尝试在表单页面上运行 javascript 以选择选项时，它在 AJAX 调用完成之前运行。因此，由于选项是由 AJAX 调用填充的，因此选择中尚不存在这些选项，因此我无法选择它们。我尝试编写一些测试代码来插入一个新选项以查看代码何时运行，果然，在我的 AJAX 填充选项进入之前，该新选项被添加到选择中。为了跟踪是否选择了选项，我正在传递通过 URL 返回选择选项值，然后在我的表单页面中处理 $_GET 数组。

所以我的问题归结为：

在 AJAX 填充函数完成之前，我可以做些什么来阻止选择所选选项的 javascript 运行？

我也会接受诸如“您的整个方法都是伪造的！您从哪里获得 AJAX 编码许可证？？！Cracker Jack 盒子？？”之类的回答。虽然，请回答其中的几个，我是一朵脆弱的花；）

提前致谢，卡维尔芬顿

附：希望这不是太多的序言，但我认为背景是必要的。

【问题讨论】：

您使用的是 AJAX 框架（如 jQuery.ajax）吗？
似乎与您既定目标保持一致的最简单的事情是将您的表单帖子包装在 ajax 调用中，并且从一开始就永远不要离开页面。
不，不使用任何框架。就直接js。
Mikeb - 这是否意味着表单操作将是 AJAX 调用而不是 php 页面？

标签： php javascript ajax

【解决方案1】：

链接选择的深度有多少？我只使用 2 个级别（1 个 ajax 驱动的选择）来执行此操作，对于第二个页面加载，我会在我的 jquery 文档就绪函数中添加一些代码，该函数将启动 ajax 调用以加载选择列表，但也会发送它的 id我想要选择的字段，所以当 ajax 调用完成时，它将加载我的选择并设置它的必要值。

【讨论】：

听起来你在使用 jQuery，而我没有。但是，根据我对使用框架函数的回应，也许我应该使用一个！
真的没有理由不使用 JS 框架。它确实简化了您的“ajax”调用。
我担心如果我默认使用框架，我会陷入不真正了解 AJAX 的陷阱，但也许我现在应该转向一个。你会推荐 jQuery 作为我使用的“最好”的吗？
我不确定它是否“最好”，但我几乎可以肯定它“足够好”
我更喜欢 jQuery 而不是原型和 mootools，您想要使用 AJAX 框架的原因是它可以在幕后处理大部分浏览器怪癖，并将您的代码从 50-100 行缩减到包括回调到也许10-20行。非常值得。

【解决方案2】：

向我们展示您的代码会有所帮助。

您是否正在同步进行 AJAX 调用？这是一种方法，但在调用完成之前会停止执行任何后续代码。

另一种（我认为更正确）方法是异步调用，然后将要执行的代码放在 onComplete 处理程序中。

【讨论】：

onComplete 处理程序是框架的一部分，还是我可以从“普通”javascript 中使用它？
处理程序在不同库中的实现方式不同，但规范在这里：w3.org/TR/XMLHttpRequest2/#event-handler-attributes
我使用 Prototype，他们调用他们的处理程序 onSuccess：prototypejs.org/learn/introduction-to-ajax

【解决方案3】：

http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback

还可以查看 Start \ Stop http://docs.jquery.com/Ajax/ajaxStart#callback 和 http://docs.jquery.com/Ajax/ajaxStop#callback - 您可以执行 javascript 来执行您需要的任何操作....

【讨论】：

【解决方案4】：

使用onreadystatechange event listener。

【讨论】：

我正在使用 onreadystatechange 并将其设置为处理 responseText 的函数。这就是我使用从 php 返回的选项值填充选择元素的函数。除了可用选项列表之外，我还可以从 php 传回选定的选项，并设置要选择的匹配选项。当我调用 php.ini 时，总会有一些东西被选中。我认为这与 CRasco 的建议相同，但没有框架。只是不确定从长远来看添加框架是否对我有益......？

【解决方案5】：

感谢所有答案！ Stackoverflow 的人再次启发了我。基于cmets，我想我有几个选择：

(1) 我可以避免使用框架，只需传递更多信息以在 onreadystatechange 事件侦听器中处理（我认为这是 Jeremy Stein 的建议，尽管我的评论混淆了这个问题）。在这种情况下，当我将选项元素动态添加到选择时，我只需将其中一个设置为选中。在这种情况下，我必须将选定的选项（我猜是通过 URL）传递给 php 文件，然后让 php 文件将其包含在构建的 responseText 中，这样我就知道在 onreadystatechange 侦听器中设置哪个选项。

(2) 我可以使用 AJAX 调用来包装表单帖子，并且永远不会离开表单页面（正如 Mikeb 建议的那样）。

(3) 我可以添加一个为我工作的框架（CRasco、Ben Hall、OrbMan）。

在过去的几个小时里，我一直在尝试了解 jQuery、Prototype 和 MooTools 的优缺点，看看哪些对我来说更容易实现并且最适合我的需求。我已经成功地获得了一个非常基本的表单页面，该页面的行为接近我想要的 jQuery。它执行该过程并且永远不会离开表单页面，所以我认为它是选项 2 和 3。现在我只需要进一步了解 $.ajax 调用的实际工作原理，以及如果需要，我可以从哪里获得 responseText。不过我可以查一下:)

所以再次感谢大家。

当不止一个答案为您指明正确的方向时，您应该在这里做什么？

【讨论】：

重要的是问题的答案是公认的答案。如果没有一个答案真正解决了您的问题，请发布您自己的答案并接受它。如果您想感谢那些帮助过您的人，请给他们点赞。