javascript - 如何让 chrome 自动填充异步帖子

Question

我有一个表单，因为它是异步提交的

<input id="idField" type="text" placeholder="Enter id" />
<input type="button" value="submit ID"  id="submitBtn" />

$(document).ready(function () {
    $("body").on("click", "#submitBtn", function () {
        var id = $("idField").val();
        $.ajax({
            type: "post",
            url: "post.php",
            data: {
                "id": id
            },
            success: function () {
                alert("done");
            }
        });
    });
});

正因为如此，谷歌似乎 ( https://stackoverflow.com/a/11746358/1252748 ) 拒绝自动填充我过去输入的数据。解决这个问题的最佳方法是什么？

是这样的吗？

<form method="post"> 
<input id="idField" type="text" placeholder="Enter id" />
<input type="button" id="submit" class="fr gen-btn" value="Submit" onClick="postForm()" /> 
</form>

function postForm() {
    var id = $("idField").val();
    $.ajax({
        type: "post",
        url: "post.php",
        data: {
            "id": id
        },
        success: function () {
            alert("done");
        }
    });
}

Answer 1

在发现自己处于非常相似的情况之后，这是我建议的解决方案。

1. 使用 FORM 标签包装您的输入
2. 确保提交表单以确保浏览器存储输入字段值以供下次使用(以使用“自动填充”功能显示它们)

请参阅下面的 HTML 代码:

<form id="myForm" method="post" action="about:blank" target="_sink">
    <input id="idField" type="text" placeholder="Enter id" />
    <input id="submitBtn" type="button" value="submit ID" />
</form>
<iframe src="about:blank" name="_sink" style="display:none"></iframe>

<script type="text/javascript">
    // assuming jQuery is available
    $(document).ready(function () {
      $("#myForm").submit(function () {
        var id = $("#idField").val();
        $.ajax({
          type: "post",
          url: "//localhost/dummy/post.php",
          data: {
            "id": id
          },
          success: function () {
            alert("done");
          },
          error: function () {
            alert("Error"); // we expect an error here since we're not actually posting to a real server
          }
        });
      });
    });
</script>

当您在 idField 中输入一个值并按 Enter(或单击提交按钮)时，它会尝试使用 ajax post 请求将表单数据提交到远程服务器。 同时，它还会将表单提交到隐藏的 iframe，这使得 Chrome 能够存储值以重新用于自动填充。

我还制作了一个 jsFiddle 演示:http://jsfiddle.net/C5Qgf/