通过 Ajax/jQuery 提交表单答案

【问题标题】：Submitting a form via Ajax/jQuery通过 Ajax/jQuery 提交表单
【发布时间】：2011-04-21 21:05:16
【问题描述】：

我通过 ajax (jquery) 构建了一个简单的登录表单，但未存储提交的值（用于登录目的的用户电子邮件地址，而不是密码）。因此，用户第二次尝试登录时，他必须填写完整的电子邮件地址，而不是使用存储的电子邮件地址。

这对于 ajax 表单提交是否正常？（更重要的是）是否有 ajax/jquery 解决方案，以便浏览器“记住”提交的值？

if($(this).attr('href')=="#login")
{
    $.ajax({
        type: "POST",
        url: "http://www.xyz.com/register",
        data:({
            email : $('#email').val(),
            password: $('#password').val()
        }),
        success: function(result)
        {
            if(result=='ok')
            {
                window.location = 'http://www.xyz.com/123';
            }
            else
            {
                $('#result').empty().addClass('error')
                    .append('Something is wrong.');
            }
        }
    });
    return false;
}

【问题讨论】：

标签： jquery ajax forms

【解决方案1】：

您是否直接执行 AJAX 请求以响应某些 UI 事件？根据您的代码，我可以假设它发生在用户单击某种“登录”链接时。因此，登录表单本身不会像通常不涉及 AJAX 那样提交。这很可能是阻止浏览器将表单注册为已填写和发送并提供记住其字段内容的原因。

我建议你拦截表单的 submit() 事件并在其中进行 AJAX 查询：

$("#loginForm").submit(function(event)
{
    event.preventDefault();
    $.ajax({
        type: "POST",
        url: "http://www.xyz.com/register",
        data:({
            email : $('#email').val(),
            password: $('#password').val()
        }),
        success: function(result)
        {
            if(result=='ok')
            {
                window.location = 'http://www.xyz.com/123';
            }
            else
            {
                $('#result').empty().addClass('error')
                    .append('Something is wrong.');
            }
        }
    });
    return false;
}

preventDefault() 调用将覆盖表单的默认提交行为，并允许您执行 AJAX 请求。现在您可以添加一个普通的登录按钮（“提交”类型的 HTML“输入”标签）或手动提交表单以响应单击您已有的链接：

$("a[href='#login']").click(function () { $("#loginForm").submit(); });

【讨论】：