Fatal编程技术网
  • javascript/
  • Javascript 我可以连接到外部服务器并更改显示页面吗

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

javascript php html ajax jquery-mobile

Javascript 我可以连接到外部服务器并更改显示页面吗,javascript,php,html,ajax,jquery-mobile,Javascript,Php,Html,Ajax,Jquery Mobile,我有一个网页，用户可以登录到外部服务器。如果登录正确，我希望当前显示更改为用户的主页。建立连接后，我想转到一个子页面，例如列表页面，并向其添加信息。此信息将从服务器获取 例如，从服务器页面：subdomain.000webhost.com/account/login用于建立连接 子页面将从url:subdomain.000webhost.com/tables获取信息，并使用JSON格式化子页面上的打印输出 整个概念可以实现吗？我相信这个设置不需要我当前的脚本。服务器的登录页和表页设置良好。我的网

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

例如，从服务器页面：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>


用户名
密码
//正在检查登录是否有效
$（文档）.ready（函数（）{
$（“#提交”）。在（“单击”，函数（）{
$.get（”http://softwarehuttest.x10.mx/public/account/login/", 
$（“#form1”）.serialize（），
功能（数据）{
警报（数据）；
});
});
});
为了简单起见，我想在成功连接后转到以下主页

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


登录
用户名
密码
$（document）.on（“pageinit”，“#loginForm”，函数（）{
$（“#提交”）。在（“单击”上，函数（）{
$.get（”http://softwarehuttest.x10.mx/public/account/login/",
$（“#form1”）.serialize（），
功能（数据）{
if（data.loggedIn）{
$.mobile.changePage（“主页”）；
}否则{
提醒（“请重试”）；
}
});
});
});
预算规划师
根据上述评论，我不确定是否建议这样做。但是，如果要在同一jQM页面中重定向用户，则应执行以下操作

将登录表单包装在页面
data role=“page”
中，并给它一个id，例如
loginForm

<div data-role="page" id="loginForm">
  <div data-role="content">
    <!-- form elements goes here -->
  </div>
</div>
注意：请记住，您还需要从DOM和导航历史记录中删除登录页面。当点击“后退”按钮时，用户将被重定向到登录页面。

我已经读了3遍，但仍然没有任何意义。你能说得更清楚些吗？让我直说吧。您希望通过未加密的通信（安全问题）将用户登录到第三方站点（可能存在跨域问题）。然后根据结果数据（可以在javascript中篡改）在您的站点上给用户一些权限（权限问题的潜在升级）？第三方站点是否支持OAuth或其他方式，您可以通过这些方式以合理的方式执行第三方登录？澄清一下，你提出的方法是完全可以实现的，它只是有一些重大的安全问题。我只是在测试。那台服务器是我安装的。我想正确设置连接，稍后再处理安全问题。除非ofc，如果我能同时轻松避开安全问题。@keshk我不知道为什么我看到这么多人说“我以后会处理安全问题”。在采用这种设计时，安全问题应该是首要考虑因素。如果您可以控制其他两台服务器，那么您就有了更多的选择（包括实现OAuth或类似的），但实际上，实现这种方法的安全方面很可能是设计的第一驱动因素。这不应该是事后诸葛亮。@andrew嗨，我更新了解释。希望它更有意义。谢谢你的回答。但这并没有将我的页面更改为主页。它与之前一样，只显示{“loggedIn”：true}。我已将更新的代码放在问题中供您查看。@keshk
loginForm
和
home
页面应位于同一HTML文件中。如果
home
位于另一个HTML文件中，则在
changePage（）
中，而不是
#home
使用
URL
，例如
$.mobile.changePage（“home.HTML”）
嗨，登录和主页都位于同一个HTML文件中，因此您的#主页是正确的。@keshk成功登录后您得到了什么？带有文本的白色页面{“loggedIn”：true}。这是在使用代码之前最初设置为显示的方式。 
<div data-role="page" id="home">
  <div data-role="content">
    <!-- dynamic updates -->
  </div>
</div>

$(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");
            }
        });
    });
});