从iframe切换“;AJAX”;正确的AJAX

Switch from iframe "AJAX" to proper AJAX

本文关键字：AJAX iframe 切换      更新时间：2023-09-26

这是遗留代码。我正在做一个项目，我们使用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，但我知道我不会为了这个目的连续工作一周。

我正在寻找一种"快速"的方法，在将这些请求发送到iframe之前拦截它们，并使用AJAX进行发送。

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

$('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的任何lib/框架相关

实际上，只需对文档就绪：执行常规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侦听器以本机方式工作(就像您在没有onclick的情况下创建的其他5%的表单一样(。

相关文章：