2

我设置了一个运行 ajax 请求的 jQuery 移动表单。问题不是请求，而是 jQuery mobile 在发送提交时加载页面内容的事实。这反过来意味着我添加到当前页面的错误然后在页面交换时被删除（如果您使用过 jquery mobile，您将知道页面散列等是如何工作的）。

ps 在非 ajax 类中包装表单将不起作用，因为它会停止我的 ajax 运行。

我就是这样设置的...

        <!--Log in/Go to register page -->
    <div data-role="page" id="one">
        <div data-role="header">
            <h1>Register of Log In</h1>
        </div>
        <div data-role="content">
            <h2>Log In form</h2>

            <form id='logInForm' action="#" method="POST">
                <div data-role="fieldcontain">
                    <label for="email">Email address:</label>
                    <input type="text" name="emailLogIn" id="emailLogIn" value=""   />
                    <br>
                    <label for="password">Password:</label>
                    <input type="password" name="passwordLogIn" id="passwordLogIn" value=""   />
                    <br>
                    <button type="button" aria-disabled="false">Submit</button>
                </div>
            </form>

            <p><a href='#two'>Not a member? Register here</a></p>

        </div>
    </div>
    <!-- /page one -->

jQuery

$(function() {
var logInFormData = $('#logInForm');

$('#logInFor').submit(function(){
    $.ajax({
        url: 'http://www.mysite.co.uk/project/logIn/logIn.php',
        type: 'post',
        data: logInFormData.serialize(),
        dataType: 'json',
        crossDomain : true,
        timeout: 5000,

        success: function(logInReturn){
            if(logInReturn.message[1]){
                localStorage.clear();
                $('form#logInForm').append("<div class='inputError'><p>" + logInReturn.message[1] + "</p></div>");
            }
            else if(logInReturn.message[2]){
                localStorage.setItem('userHandle', logInReturn.message[2].userHandle);
                localStorage.setItem('userId', logInReturn.message[2].userId);              
                window.location ='selectProject.html';
            }
        },

        error: function(){
            alert('There was an error loading the data. Contact the admin.');
        }
    });
   });
});

所以你可以看到我的PHP出错的结果，我在页面上添加了一个div，但是这个页面然后被换掉并替换为一个相同的页面减去div。很烦人。我猜有一种方法可以在页面交换后附加它？

谢谢。

4

1 回答 1

2

当您提交表单时，您想禁止它的操作。像这样：

$('#logInForm').submit(function(e){
    e.preventDefault();
    $.ajax({

或者你可以返回 false：

$('#logInForm').submit(function(){
    $.ajax({
        // Your Ajax code
    });
    return false;
});

否则，不要使用该submit事件，而是click在您的按钮上选择一个事件。这是一个使用示例：http click(): //jsfiddle.net/Twisty/zaJud/

于 2013-02-05T19:11:32.810 回答