事件处理程序中的$ .getJSON失败

时间:2014-09-02 18:46:48

标签: jquery ajax cordova

我在cordova项目中有一个页面,当用户按下登录按钮使用我的REST脚本对用户进行身份验证时,该页面会尝试发送AJAX请求。奇怪的是,如果我把AJAX代码放在ready函数中,但是如果我把它放在一个事件处理程序中,它的状态代码是404.这就是我现在拥有的代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />

        <!-- Set the viewport settings to prevent scaling -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />

        <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <title>Login</title>
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link rel="stylesheet" href="css/ratchet.css">
        <meta name="msapplication-tap-highlight" content="no" />
        <script src="js/jquery-2.1.1.min.js"></script>
        <script>
            $(document).bind("mobileinit", function(){
                $.support.cors = true;
                $.mobile.allowCrossDomainPages = true;
            });
        </script>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script src="js/ratchet.js"></script>
        <script type="text/javascript">

            app.initialize();

            function auth(username, password){
                $.getJSON("http://devserver/REST.php?callback=?", {method: "mobileAuthUser", username: username, password: password}, function(response, status, xhr){
                    alert(response);
                }).error(function(xhr, ajaxOptions, thrownError){
                    alert("error");
                    alert(xhr.status);
                    alert(thrownError);
                });
            }

            $(function(){
                auth("username", "password");
                $("#subButton").click(function(){
                    auth("username", "password");
                });
            });
        </script>
        <style>
            /*Stops the text from being in all caps*/
            body * {
                text-transform: none;    
            }
        </style>
    </head>
    <body>
        <header class="bar bar-nav">
            <h1 class="title">Login</h1>
        </header>
        <div class="content">
            <form>
                <input type="text" id="username" placeholder="username">
                <input type="password" id="password" placeholder="password">
                <button class="btn btn-positive btn-block" id="subButton">Login</button>
            </form>
        </div>
        <div id="deviceready">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </body>
</html>

这里的焦点是

auth("username", "password");
$("#subButton").click(function(){
    auth("username", "password");
}

页面准备就绪时正好运行的auth()工作得很好。点击按钮时运行的auth()将改为返回错误,在错误回调中它会给我一个错误代码404.我不明白我是怎么做的完全相同的函数调用失败只是因为它在事件处理程序中。

1 个答案:

答案 0 :(得分:0)

$("#subButton").on('touchend', function(){
    auth("username", "password");
});

而不是click事件。