使用 AJAX 调用时如何存储到浏览器自动完成/自动填充答案

【问题标题】：How to store to browser auto-complete/auto-fill when using AJAX calls使用 AJAX 调用时如何存储到浏览器自动完成/自动填充
【发布时间】：2012-03-01 09:24:44
【问题描述】：

我注意到浏览器在提交表单之前不会存储表单值，这意味着如果您使用 AJAX 而不是标准表单提交，则永远不会填充浏览器的自动填充。有没有办法强制填充您的浏览器自动填充/自动完成，以便我可以通过 AJAX 提交的表单获得这种便利？访问我的 AJAX 页面，每次都必须在表单字段中输入相同的内容，因为浏览器不记得它们，这很烦人。

我的问题与this one 几乎相同，只是只提供了 FireFox 中的解决方法作为该问题的公认答案。我正在寻找一种适用于所有主流浏览器（至少 Chrome、FF 和 IE）的解决方案，如果有的话。

注意：我不是在谈论 AJAX 自动完成插件，这是在谷歌搜索这个问题时几乎总是会弹出的。我说的是您的浏览器内置的自动完成或自动填充功能，它通过记住您过去输入的内容来帮助您填写表格。

【问题讨论】：

你能提交到 javascript: URI 吗？
这在 AJAX 表单中是一个如此巨大的问题，我发现令人震惊的是，在网络上或任何有效的跨浏览器解决方案中关于它的信息如此之少。谁知道呢，也许那里有资源，但正如您提到的，很难浏览所有关键字如此相似的自动完成插件内容。编辑：刚刚看到这是在 2012 年发布的。我们在 2 年后没有任何进展
在这里回答...stackoverflow.com/questions/15462991/…

标签： ajax browser autocomplete

【解决方案1】：

对于仍在尝试解决此问题的任何人，我好像找到了answer。

Chromium 会尝试识别提交事件，即使您阻止默认并自己处理实际提交也是如此。

就是这样，你需要preventDefault提交事件，不是点击事件。

在撰写本文时，这适用于 Chrome、Edge 和 IE 11（我懒得在 Firefox 上下载和测试它）。这是您的表格：

<form method="POST" id="my-form">
  <label>Email</label>
  <input autocomplete="email" type="email" name="email">
  <button type="submit">Subscribe</button>
</form>

注意autocomplete 属性。这些是您可以用于autocomplete 的所有possible values。

在 JavaScript 中，只需这样做：

$("#my-form").on("submit", function (ev) {
  ev.preventDefault();

  // Do AJAX stuff here
});

浏览器会记住您在点击订阅按钮时输入的任何电子邮件。

【讨论】：

【解决方案2】：

我也遇到过这个；似乎没有一个很好的解决方案，当然不是跨浏览器的解决方案，但这里有一个我没有看到任何人提到的 IE：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT>
function subForm()
{
window.external.AutoCompleteSaveForm(f1);
f1.submit();
}
</script>
</HEAD>
<BODY>
<FORM id=f1>
User ID : <input type=text name=id></input><br>
Password :<input type=password name=pw></input><br>
E-mail :<input type = text VCARD_NAME = "vCard.Email"> <br>
<input type=button value=submit onclick="subForm()">
</FORM>
</BODY>
</HTML>

发件人：http://support.microsoft.com/kb/329156

【讨论】：

【解决方案3】：

您是否尝试过您提到的我的问题的答案？答案是使用隐藏的 iframe，但似乎他声称这个想法当时不适用于 IE 和 Chrome。

尝试接受这个想法，而不是使用隐藏的 iframe，只需将用户名/密码/提交可见输入元素放在一个表单 POST 中，在一个 iframe 中。因此，用户将直接在 iframe 中输入登录详细信息。使用适当的 Javascript，您可以放置加载图像，从服务器获取成功或拒绝，并更新父页面或整个页面。我相信它应该适用于任何浏览器。

或者如果您仍然想使用 AJAX，因为您可能在服务器端实现了 API。您可以让 iframe 仅发送一个虚拟 POST，同时将真实用户/密码发送到 AJAX URL。

或者返回使用隐藏的iframe，不是隐藏它而是将它移动到像top: -1000px这样的不可见区域。

【讨论】：

我也遇到了同样的问题，请问您找到解决办法了吗？
我没有测试，但是使用iframe有什么问题吗？请与读者分享您的问题。
Chrome 46 修复了它的错误行为 - 不再需要 iframe 变通方法。见stackoverflow.com/a/33113374/810109

【解决方案4】：

使用这个方法：

AutoCompleteSaveForm = function(form){
    var iframe = document.createElement('iframe');
    iframe.name = 'uniqu_asdfaf';
    iframe.style.cssText = 'position:absolute; height:1px; top:-100px; left:-100px';
    document.body.appendChild(iframe);
    var oldTarget = form.target;
    var oldAction = form.action;
    form.target = 'uniqu_asdfaf';
    form.action = '/favicon.ico';
    form.submit();
    setTimeout(function(){
        form.target = oldTarget;
        form.action = oldAction;
        document.body.removeChild(iframe);
    });
}

用ie10、ff最新、chrome最新测试

测试自己：http://jsbin.com/abuhICu/1

【讨论】：

这会像地狱一样消耗带宽，数据交换甚至没有用。
我认为这是唯一的解决方案。是的，它会发送整个表单，但在后台。
无论是否是隐藏任务，它都不会比淹没服务器的死请求少。我希望 Ajax 很快就会有更好的解决方案。
遗憾的是，这在基于 webkit 的浏览器中不起作用（不再）：Opera 30、GC 43、Safari 5.1.7
它适用于我的 chrome：43.0.2357 和 45.0.2448.0 canary

【解决方案5】：

经过几个小时的搜索，我在Trigger autocomplete without submitting a form 找到了解决方案。

基本上，它在同一页面中使用隐藏的 iframe，将表单的操作设置为 iframe 的“src”，并在表单内添加隐藏的提交按钮，当用户单击触发 AJAX 请求的按钮时，您应该在发送 AJAX 请求之前以编程方式单击隐藏按钮。见下面的例子：

在您的表单页面中：

<iframe id="hidden_iframe" name="hidden_iframe" class="hidden" src="/content/blank"></iframe>
<form target="hidden_iframe" method="post" action="/content/blank" class="form-horizontal">
    <input type="text" name="name">
    <input type="text" name="age">
    ....
    <button id="submit_button" type="submit" class="hidden"></button>
    <button id="go_button" type="submit" class="hidden">Go</button>
</form>

然后是java脚本：

$('#go_button').click(function(event){
    //submit the form to the hidden iframe
    $('#submit_button').click(); 
    //do your business here
    $.ajax(function(){
        //whatever you want here
    }})
);

希望这会有所帮助。

【讨论】：