从 iframe“AJAX”切换到正确的 AJAX答案

【问题标题】：Switch from iframe "AJAX" to proper AJAX从 iframe“AJAX”切换到正确的 AJAX
【发布时间】：2016-10-19 07:24:38
【问题描述】：

这是遗留代码。我正在做一个项目，我们使用 iframe 来模拟 AJAX。

基本上，我们使用 target 属性在 iframe 中提交 <form>，导致请求未打开新标签。此外，我们在来自 PHP 的响应中回显 <script></script>，并且由于它填充 iframe，因此结果被执行。

这是<form> 的示例：

<form id="form_to_submit" method="POST" action="ajax/createUser" target="iframe_name">
    <input type="text" name="input_to_send">
    <button type="button" onclick="$('#form_to_submit').submit()">Submit With Onclick!</button>
</form>

如今，这不仅看起来很邪恶，而且还有一个（也许是其他）巨大的陷阱。如果通过这个过程发出了一个请求，并且客户端去了某个地方，然后又回到了他的浏览器历史记录中，它会再次发送请求。

要解决最后一个问题，有很多解决方案。我认为我最喜欢的是使用真正的 AJAX 而不是 iframe。现在，理论上，我可以更改源代码中的每一个表单以使其使用 AJAX，但我知道我不会为了这个目的而连续工作 1 周。

我正在寻找一种“快速”的方式来拦截这些请求，然后再将它们发送到 iframe，并改为使用 AJAX 发送它们。

到目前为止，我尝试定位具有target="iframe_name" 的<form> 标记并监听submit 事件，然后使用相同的方法/URL/数据再次发送请求。

$('form[target=iframe_name]').on('submit', function (event) {
        event.preventDefault(event);

        var url = $(this).attr('action'),
        datas = $(this).serialize();

        $.post(url, datas).done(function (response) {
            eval($(response).text());
        });
});

但这只有在通过真正点击提交按钮提交时才有效。我想说这些案例中有 95% 是通过 onclick 标签提交的，这些标签将 .submit() 表单，在这些情况下，submit 事件不会触发它出现。

我被卡住了，你知道吗？

注意：我标记 jquery 只是为了让您知道它可以使用，即使这个问题仍然与 JS 的任何库/框架相关。

【问题讨论】：

所以您已经解释了您希望实现的目标，您已经解释了您尝试过的内容。您尝试的源代码在哪里？您的尝试似乎有什么问题......
我在问题中解释说，我的代码不起作用，因为大多数<form> 标签是通过onclick 属性提交的，不会触发submit 事件。我试着听那个事件。
您是否尝试过使用onsubmit="myfunction()" 或通过javascript 创建事件监听器来监听submit...？
如果我可以更改每个<form> 标签，我会简单地使用没有HTML 属性的绑定，但我不能，因为它们太多了。我尝试通过JS创建一个事件监听器来监听submit，这也是我解释的！我会发布代码。
发布相关的源代码总是有帮助的，因为它为人们提供了一些可以使用的东西。如果没有看到您的尝试，就很难看出源代码失败的原因，这使得为您提供解决方案变得更加困难。感谢您更新您的问题。

标签： javascript php jquery ajax iframe

【解决方案1】：

您实际上可以通过对文档就绪执行常规 jQuery 操作来删除 onclick 属性：

<script>
$(document).ready(function() {
    var getButton   =   $('form').find('button');
    getButton.prop('onclick',null);

    // put listener script here for new form submit (using ajax)...
});
</script>

这段代码只是在页面上对所有表单进行一般查找，找到按钮，然后删除onclick 属性。完成此操作后，表单不应再使用该内联 javascript 提交。

我建议这只是暂时的，因为您会随着时间的推移逐步更改表单以使用 jQuery 侦听器本地工作（就像您创建的其他 5% 的表单没有 onclick）。

【讨论】：