标准表单提交 vs Ajax 表单提交 - 浏览器自动保存/建议用户输入

Question

标准表单提交 vs Ajax 表单提交 - 浏览器自动保存/建议用户输入

9

大多数与ajax结合使用的表单用户可能已经注意到，用户提交的输入在后续会话中不能被浏览器保存或建议。这在“登录”页面上是一个缺点。浏览器通常会提供保存用户名/密码的选项，非常方便，但是通过ajax表单提交....呃，你知道的，这根本不会发生。

我已经在这里看到了这个问题两次，但仍然没有答案。距离提问已经有大约9个月了，我知道这里有很多聪明的人。那么...我们该怎么解决这个问题呢？我们能以某种方式欺骗浏览器吗？

我愿意来回协商解决这个问题，因为我知道对我们所有人来说拥有一个可用的解决方案会很好。

从slashingweapon的答案得出的最终解决方案（感谢你！）：

HTML-使用自定义按钮进行提交，以及没有表单“action”或“method”，只有ajax。

<form id="signin">

    <label for="username">Username</label>
    <input type="text" id="username" name="username" />

    <label for="password">Password</label>
    <input type="password" id="password"  name="password" />

    //Custom Styled Submit Button
    <img id="submit" class="form_button" src="btn_txt_sign_in.png" alt="Sign In" tabindex="3" />

    //Hidden Standard Form Submit Button
    <input id='trigger' type='submit' style='display:none;' />

</form>

JQuery

// Bind a click to the Custom Submit Button
$('#submit').click( function() {
    //Trigger a Click on the Hidden Standard Form Submit 
    $('#trigger').click();
});

// Detect when the form attempts to be submitted
$('#signin').submit( function(e){
    // Prevent Standard Form Submission
    e.preventDefault();
    // Perform Function containing Ajax Submission instead
    submit_signin();
});

// Ajax Submission
function submit_signin() {
    //My Ajax Call....
}

- VIDesignz

你是如何提交表单的？绑定表单的“submit”事件并在那里使用AJAX对我很有效... - Jan Hančič

@JanHančič 我正在使用序列化从表单中获取数据，并通过ajax进行发布。我没有为表单本身使用“method”或“action”，因为页面不应重新加载或转到另一页。本质上，表单只是用于捕获输入，而Ajax用于将数据发布到PHP并动态返回结果。 - VIDesignz

我认为Jan问的是，您使用哪个事件来指示表单提交？您使用的是提交事件还是按钮点击事件？ - slashingweapon

@slashingweapon 我正在使用自定义按钮上的点击事件。我没有使用标准的<input type='submit'>。 - VIDesignz

使用提交按钮而不是自定义按钮。捕获表单的提交事件而不是按钮点击事件。 - slashingweapon

@slashingweapon，一方面，我理解你的意思；另一方面，应该只通过ajax调用提交表单，而不是实际通过“action”和“method”提交表单。您能否发布一个答案来说明您的意思？ - VIDesignz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- slashingweapon · Accepted Answer

当任何提交类型的按钮被点击时，封闭的表单将会被提交。您可以选择处理提交事件而不是按钮的点击事件。以下是一个例子：

$('#demoForm').submit(function(evt) {
    evt.preventDefault();
    var data = $(this).serialize();
    alert(data);
});

这里还有一个Fiddle给你参考。

通过捕获后面的事件，您将确保至少一些浏览器有机会存储表单数据以供未来自动填充。