Question

我的简单应用包含两个页面。
1.登录页面
2.第一页（如果登录成功则显示）

登录表单获取用户输入并通过向check.php页面发送数据来验证用户。

登录页面和pageone页面

    <body>
 <div data-role="page" id="login" >
  <div data-role="header" data-position="fixed">

    <h1>Login</h1>

  </div>

  <div data-role="main" class="ui-content">

    <form id="check-user" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
                <fieldset>
                    <div data-role="fieldcontain">
                        <label for="username">Enter your username:</label>
                        <input type="text" value="" name="username" id="username"/>
                    </div>                                  
                    <div data-role="fieldcontain">                                      
                        <label for="password">Enter your password:</label>
                        <input type="password" value="" name="password" id="password"/> 
                    </div>
                    <input type="button" data-theme="b" name="submit" id="submit" value="Submit">
                </fieldset>
            </form> 



  </div>

  <div data-role="footer"  data-position="fixed" >
    <h1>IIL 2014</h1>
    </div>
     </div> 


     <div data-role="page" id="pageone"  class="my-page">
          <div data-role="header" data-position="fixed">
                  <a href="#" id="user" data role="button"></a>
            <h1>Dashboard</h1>
              <a href="#" id="refreshdata" data role="button">Refresh</a>
          </div>

          <div data-role="main" class="ui-content">




          </div>

          <div data-role="footer"  data-position="fixed" >
            <h1>IIL 2014</h1>
          </div>
        </div>      


      </body>

java脚本函数

<script>
    $(document).on('pagebeforeshow', '#login', function(){  
        $(document).on('click', '#submit', function() { // catch the form's submit event
        if($('#username').val().length > 0 && $('#password').val().length > 0){
            // Send data to server through ajax call
            // action is functionality we want to call and outputJSON is our data
                $.ajax({url: 'http://iilsfa.br0s.info/Dashboard/check.php',
                    data: {action : 'login', formData : $('#check-user').serialize()}, // Convert a form to a JSON string representation
                        type: 'post',                   
                    async: true,
                    beforeSend: function() {
                        // This callback function will trigger before data is sent
                        $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
                    },
                    complete: function() {
                        // This callback function will trigger on data sent/received complete
                        $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
                    },
                    success: function (result) {
                            resultObject.formSubmitionResult = result;
                                        $.mobile.changePage("#pageone");
                    },
                    error: function (request,error) {
                        // This callback function will trigger on unsuccessful action                
                        alert('Network error has occurred please try again!');
                    }
                });                   
        } else {
            alert('Please fill all nececery fields');
        }           
           return false; // cancel original event to prevent form submitting

        });    

});

$(document).on('pagebeforeshow', '#pageone', function(){     
    $('#user').append('This is a result of form submition: ' + resultObject.formSubmitionResult);  
});

var resultObject = {
    formSubmitionResult : null  
}

</script>

check.php

<?php

    echo "Username =xxxxxx ";
?>

我的问题是javascript函数没有从服务器发送或接收任何数据。当我输入两个文本框的值并单击提交按钮时，没有任何反应。请帮我解决这个问题。这是我跟随的例子 jQuery Mobile: How to correctly submit form data

Answer 1

自jQM 1.2版起，不推荐使用

$.mobile.showPageLoadingMsg()和$.mobile.hidePageLoadingMsg()。请改用$.mobile.loading('show')和$.mobile.loading('hide')。

这是您的部分修改代码

beforeSend: function() {
    // This callback function will trigger before data is sent
    $.mobile.loading('show') // This will show ajax spinner
},
complete: function() {
    // This callback function will trigger on data sent/received complete
    $.mobile.loading('hide') // This will hide ajax spinner
},

使用jqm 1.4.2进行测试

Jquery Mobile登录表单提交

1 个答案: