通过Ajax / jQuery提交表单

Question

我已经通过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;
}

Answer 1

您是否直接响应某个UI事件执行AJAX请求？ 我可以基于您的代码来假设的是，它发生在用户单击某种“登录”链接时。 因此，登录表单本身不会像通常不涉及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请求。 现在，您可以只添加一个普通的登录按钮（类型为“ submit”的HTML“ input”标签），也可以手动提交表单以响应单击已有的链接：

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