我可以连接到外部服务器和改变我的显示页面 - Can I connect to external server and change my display page

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

例如从服务器页面: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}。除此之外什么都不会发生。这就是问题所在。

我希望能够建立这个连接，当为真时，我想显示主页。如前所述，我在问我如何使这个过渡从登录-服务器连接-显示主页发生。如果我那样做了，我会失去联系吗?

编辑:奥马尔

<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>

我不确定是否按照上面的评论推荐这样做。但是，如果您希望在同一个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>

然后使用下面的代码，把它放在页div的loginForm。在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和导航历史中删除登录页面。当点击后退键时，用户将被重定向到登录页面