浏览器自动完成/保存的表单在 ajax 请求中不起作用

Posted 2023-03-05

【中文标题】浏览器自动完成/保存的表单在 ajax 请求中不起作用

【英文标题】：browser autocomplete/saved form not work in ajax request

【发布时间】：2010-12-10 00:10:11

【问题描述】：

很难在搜索引擎中搜索任何关键字组合，因为大多数流行的开发人员使用它想要通过 ajax 自定义自动完成。

大多数开发人员搜索自定义自动完成以通过 ajax 从 db 中获取结果，或者出于安全原因如何禁用浏览器自动完成，或者他们想使用另一个自动完成扩展器。

但是我不是在谈论自动完成。我发现了简单的普通浏览器自动完成或浏览器保存的表单，无论是 IE 还是 FF，在向文本框中填充文本时，它的作用就像下拉最近的选择一样。

在登录表单中填写用户名和密码等表单简单而正常。表单提交后（表单数据发布）浏览器将保存自动完成或FF中的事件将要求与密码一起保存。

现在，考虑一下通过 ajax 提交的登录。表单数据不会被 IE 或 FF 自动保存，因为表单不是通过 post 方法发送的。我很确定这是因为 ajax vs post 方法。

像 DotNetNuke 这样的 CMS 使用这种方式，我真的很难为 5 个用户登录输入用户名和密码以用于开发目的，事件我想让用户在浏览器中保存自己的表单数据而无需任何自定义或扩展程序。再举一个例子，用户可以看到并使用相同的电子邮件来填写跨网站或域的任何电子邮件表单。

如何解决这个问题？ 您有建议更适合搜索的关键字吗？

呼叫MeLaNN

【问题讨论】：

我还在寻找解决方案...

我在这里问过几乎相同的问题：***.com/questions/9201858/…。我想要一个通用的解决方案，而不是只适用于 FF 的解决方案。

你找到答案了吗？我有同样的问题。干杯

我觉得你可以试试"double-submit" technique

【参考方案1】：

我也有同样的问题。我能够通过添加一个隐藏的 iframe 来为 FireFox 解决这个问题，我在执行 AJAX 发布之前通过 javascript 提交该 iframe。我还没有找到任何适用于 Chrome/IE 的东西。

【讨论】：

Chrome 46 终于修复了它的错误行为。见***.com/a/33113374/810109

【参考方案2】：

我遇到了同样的问题并进行了一些搜索。如果您有登录页面，我认为下面的解决方案是解决此问题的最方便的方法。如果我们考虑通过 ajax 提交的登录，则没有一个浏览器会记住或为用户名和密码字段提供自动编译功能，另外还要求记住凭据。但是如果您使用javascript提交功能（可能与旧版本的浏览器不兼容），除了IE之外，所有浏览器都提供保存用户名和密码的功能。但是我发现 IE 的另一个 javascript 很难让它提供保存用户名和密码。

在我的登录页面中，我已经处理了用户名和密码，并通过 ajax 请求将它们发送到服务器端，如果登录成功，我通过以下方法提交表单，否则它已向用户显示一个警告框登录失败。

请查看以下链接：

[编辑]：链接已损坏

在链接的页面中有一个关于这个问题的固定页面，由于我的声誉，我不能给你另一个链接。请在页面中搜索以下报价：

查看固定页面。

当然，如果由于表单提交而在默认页面中有登录部分，则此方法不适合。这会导致页面闪烁。我想知道是否有人对此有想法？

【参考方案3】：

这里是一些不显眼的 js jQuery 代码，它们将通过 ajax（$.post 方法）将表单提交给真正的后端脚本，也通过 iFrame 提交给虚拟脚本，因此浏览器将保存提交的数据以供后续自动完成.

这在 chrome 下工作得很好。任何反馈都非常受欢迎！

var  formframesindex = 0;
function onSubmitAjax(evt)
    var $form = $(this);
    var framesubmitting = $form.hasClass('framesubmitting');
    var action = $form.attr('action');
    var original_action = action;

    if(!framesubmitting)
        $.post(action,$form.serialize()+"&ajax=1", function(responseText,message,request)
            formResponseHandler(responseText);
        , "json");


        formframesindex++;
        var formframe = $("<iframe name='formframe_id_"+(formframesindex)+"' id='formframe_id_"+(formframesindex)+"' class='formframe' src='/fakeformreceiver.php'></iframe>");
        $('body').append(formframe);
        var target = $form.attr('target');
        $form.data('originaltarget',target);
        $form.data('originalaction',original_action);
        $form.attr('target','formframe_id_'+formframesindex);
        $form.attr('action','/fakeformreceiver.php');
        $form.addClass('framesubmitting');
        $form.submit();

     else 
        var current_target = $form.attr('target');
        var original_action = $form.data('originalaction');
        var original_target = $form.data('originaltarget');
        var $frame = $('#'+current_target);
        setTimeout(function()
            if($frame && $frame.length)
                $frame.remove();
            
            $form.attr('action',original_action);
            $form.attr('target',original_target);
            $form.removeClass('framesubmitting');
        ,100);
    
    return framesubmitting;

【讨论】：

Chrome 46 修复了它的错误行为 - 不再需要 iframe 变通方法。见***.com/a/33113374/810109