如何使用ajax和json登录hibrid移动应用程序

Question

如何使用ajax和json登录hibrid移动应用程序

Mah*_*mad 8 javascript php ajax jquery json

我是新手编码员.对于我的项目,我正在尝试使用json和制作移动网络的登录表单ajax.我试图通过自己在这里测试教程中的代码.

这是我的代码:

<!DOCTYPE html>
<html>
<head>
    <title>JQM Demo Login</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="libs/jquery.mobile-1.4.3.min.css" />
    <script type="text/javascript" src="libs/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="libs/jquery.mobile-1.4.3.min.js"></script>
    <script type="text/javascript" src="js/login.js"></script>
</head>
<body>
    <div data-role="page" id="login">
        <div data-role="header">
            <h3>Login Page</h3>
        </div>

        <div data-role="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">Username</label>
                        <input type="text" value="" name="username" id="username" class="ui-theme-b" />
                    </div>
                    <div data-role="fieldcontain">
                        <label for="username">Password</label>
                        <input type="password" value="" name="password" id="password" class="ui-theme-b" />
                    </div>
                    <input type="button" data-theme="b" name="submit" id="submit" value="Login">
                </fieldset>
            </form>
        </div>

        <div data-role="footer" data-position="fixed">

        </div>
    </div>

    <div data-role="page" id="second">
        <div data-role="header">
            <h3>Welcome Page</h3>
        </div>

        <div data-role="content">

        </div>
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

用javascript:

$(document).on('pageinit', '#login', function() {
    $(document).on('click', '#submit', function() {
        if ($('#username').val().length > 0 && $('#password').val().length > 0) {
            $.ajax({
                url: 'check.php',
                data: {action: 'login', formData: $('#check-user').serialize()},
                type: 'post',
                async: 'true',
                dataType: 'json',
                beforeSend: function() {
                    $.mobile.loading('show', {theme:"a", text:"Please wait...", textonly:true, textVisible:true});
                },
                complete: function() {
                    $.mobile.loading('hide');
                },
                success: function(result) {
                    if (result.status) {
                        user.name = result.message;
                        $.mobile.changePage('#second');
                    } else {
                        alert('logon unsuccessful!');
                    }
                },
                error: function(request,error) {
                    alert('Network error has accurred please try again!');
                }
            });
        } else {
            alert('Please fill all necessary fields!');
        }
        return false;
    });
});

$(document).on('pagebeforeshow', '#second', function() {
    $.mobile.activePage.find('.ui-content').html('Welcome' + user.name);
});

var user = {name : null};

Run Code Online (Sandbox Code Playgroud)

它使用ajax将数据导向localhost中的同一服务器中的check.php.

<?php
    $action = $_POST['action'];

    parse_str($_POST['formData'], $output);

    $username = $output['username'];
    $password = $output['password'];

    $output = array('status' => true, 'message' => $username);
    echo json_encode($output);  

?>

Run Code Online (Sandbox Code Playgroud)

在教程' example ' 提供的链接中,代码工作正常.但对我来说,当我尝试实现相同的功能时,我会遇到错误.

发生网络错误请再试一次!

谁能告诉我我的代码有什么问题？以及如果使用MySQL数据库验证的用户名和密码如何使其成功？

Answer 1

小智 1

你的JS代码看起来不错，我建议你显示“错误”以进行调试。在错误方法中尝试 console.log(error) 。

无论如何，可能的原因可能是：

check.php返回的数据不是json格式的。因此，如果您返回“YES”或“1”等，请确保它是 JSON 格式。
SQL 查询中存在一些异常/错误。因此您会收到自定义消息。

归档时间：	10 年，8 月前
查看次数：	1041 次
最近记录：	10 年，8 月前