使用 AJAX 调用时如何存储到浏览器自动完成/自动填充
Posted
技术标签:
【中文标题】使用 AJAX 调用时如何存储到浏览器自动完成/自动填充【英文标题】：How to store to browser auto-complete/auto-fill when using AJAX calls 【发布时间】：2012-03-01 09:24:44 【问题描述】：我注意到浏览器在提交表单之前不会存储表单值，这意味着如果您使用 AJAX 而不是标准表单提交，则永远不会填充浏览器的自动填充。有没有办法强制填充您的浏览器自动填充/自动完成，以便我可以通过 AJAX 提交的表单获得这种便利？访问我的 AJAX 页面，每次都必须在表单字段中输入相同的内容，因为浏览器不记得它们，这很烦人。
我的问题与this one 几乎相同，只是只提供了 FireFox 中的解决方法作为该问题的公认答案。我正在寻找一种适用于所有主流浏览器（至少 Chrome、FF 和 IE）的解决方案，如果有的话。
注意：我不是在谈论 AJAX 自动完成插件，这是在谷歌搜索这个问题时几乎总是会弹出的。我说的是您的浏览器内置的自动完成或自动填充功能，它通过记住您过去输入的内容来帮助您填写表格。
【问题讨论】：
你能提交到 javascript: URI 吗？ 这在 AJAX 表单中是一个如此巨大的问题，我发现令人震惊的是，在网络上或任何有效的跨浏览器解决方案中关于它的信息如此之少。谁知道呢，也许那里有资源，但正如您提到的，很难浏览所有关键字如此相似的自动完成插件内容。编辑：刚刚看到这是在 2012 年发布的。我们在 2 年后没有任何进展 在这里回答...***.com/questions/15462991/… 【参考方案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 变通方法。见***.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
)
);
希望这会有所帮助。
【讨论】：
以上是关于使用 AJAX 调用时如何存储到浏览器自动完成/自动填充的主要内容，如果未能解决你的问题，请参考以下文章
如何根据从 ajax 调用返回的数据动态地将选项添加到我的自动完成功能？
使用 setTimeout 定期进行自动完成 AJAX 调用？