jQuery Mobile中的AJAX表单提交

Question

我试图在jQuery Mobile网站上通过ajax提交一个简单的登录表单,但我遇到了麻烦.

看来,当我提交表单(通过POST)时,表单参数会被添加到url中.不仅如此,他们还删除了表单提交前我所处的锚定页面.

例如,我在页面上 localhost:8080/myapp/#sign_up

然后我提交表单,导致网址成为: localhost:8080/myapp/?email=a@a.com&pass=pass

因此,如果我点击验证错误并单击"后退"按钮,我就不会返回到#sign_up页面.

有任何想法吗？

Answer 1

如果使用自定义submit事件处理程序处理表单提交,则可以在同一页面上处理验证:

//bind an event handler to the submit event for your login form
$(document).on('submit', '#form_id', function (e) {

    //cache the form element for use in this function
    var $this = $(this);

    //prevent the default submission of the form
    e.preventDefault();

    //run an AJAX post request to your server-side script, $this.serialize() is the data from your form being added to the request
    $.post($this.attr('action'), $this.serialize(), function (responseData) {

        //in here you can analyze the output from your server-side script (responseData) and validate the user's login without leaving the page
    });
});

要阻止jQuery Mobile运行自己的表单的AJAX sumbission,请将其放在表单标记上:

<form data-ajax="false" action="...">