Question

我有一个网页，用户可以登录外部服务器。如果登录正确，我希望当前显示更改为用户的主页。建立连接后，我想转到子页面，例如列表页面并向其添加信息。此信息将从服务器获取。

例如，从服务器页面：subdomain.000webhost.com/account/login用于建立连接。

子页面将从url：subdomain.000webhost.com/tables获取信息，并使用JSON格式化子页面上的打印输出。

这整个概念可以完成吗？我相信这个设置我不需要当前的脚本。服务器设置为登录页面和表格页面。我的网页可以登录服务器。我知道如何将服务器中的信息附加到我的网页（子页面）。

我遇到的困惑是如何在登录成功后登录外部服务器并显示主页。更改页面让我感到困惑。还要担心如果我这样做，我将失去与服务器的连接。

登录页面：

<form id="form1" name="form1" method="GET" action="http://softwarehuttest.x10.mx/public/account/login/">
    <label for="id">Username   </label>
    <input type="text" name="id" id="id" />

    <label for="password">Password   </label>
    <input type="password" name="password" id="password" />

    <input type="submit" name="submit" value="Login"/>    
</form>

<script>
    //checking if the log in works
    $(document).ready(function() {
        $("#submit").on("click", function() {
            $.get( "http://softwarehuttest.x10.mx/public/account/login/", 
                   $("#form1").serialize(), 
                    function(data) {
                        alert(data);
            });
        });
    });
</script>

为了简单起见，我想在成功连接后转到以下主页。

<html>
    <div data-role="page" id="home" data-theme="e">
        <body><h1>this is homepage</h1></body>
    </div>
</html>

编辑：

我有一个连接到外部服务器的登录页面。截至目前，如果凭据正确，我将收到一个消息页面，上面写着{“loggedIn”：true}，如果登录不正确，则会收到{“loggedIn”：false}。除此之外没有任何事情发生那就是问题所在。

我希望能够建立此连接，如果为true，我想显示主页。如前所述，我问如何从登录 - 服务器连接 - 显示主页进行此转换。如果我这样做，我会失去联系。

编辑：奥马尔

<div data-role="page" id="loginForm" data-theme="e"><!--Start of Log In Page-->
    <header data-role="header">
        <h1>Log In</h1>       
    </header>
    <form id="form1" name="form1" method="GET" action="http://softwarehuttest.x10.mx/public/account/login/">
        <label for="id">Username   </label>
        <input type="text" name="id" id="id" />

        <label for="password">Password   </label>
        <input type="password" name="password" id="password" />

        <input type="submit" name="submit" value="Login"/>    
    </form>

    <script>
        $(document).on("pageinit", "#loginForm", function () {
            $("#submit").on("click", function () {
                $.get("http://softwarehuttest.x10.mx/public/account/login/",
                $("#form1").serialize(),
                function (data) {
                    if (data.loggedIn) {
                        $.mobile.changePage("#home");
                    } else {
                        alert("Please try again");
                    }
                });
            });
        });
    </script>
</div><!--End of Log In Page-->

    <div data-role="page" id="home" data-theme="e"><!--Start of Home Page-->
        <h1>Budget Planner</h1>
    </div>

Answer 1

我不确定是否按照上述评论推荐。但是，如果要在同一jQM页面中重定向用户，则应执行以下操作。

在页面data-role="page"中换行登录表单并为其指定ID，例如loginForm。

<div data-role="page" id="loginForm">
  <div data-role="content">
    <!-- form elements goes here -->
  </div>
</div>

<div data-role="page" id="home">
  <div data-role="content">
    <!-- dynamic updates -->
  </div>
</div>

然后使用以下代码，将其放在loginForm的 page div 中。不要在jQM中使用.ready()。

$(document).on("pageinit", "#loginForm", function () {
    $("#submit").on("click", function () {
        $.get("http://softwarehuttest.x10.mx/public/account/login/",
        $("#form1").serialize(),
        function (data) {
            if (data.loggedIn) {
                $.mobile.changePage("#home");
            } else {
                alert("Please try again");
            }
        });
    });
});

注意：请注意，您还需要从DOM和导航历史记录中删除登录页面。当按下后退按钮时，用户将被重定向到登录页面。

我可以连接到外部服务器并更改我的显示页面

1 个答案: