我有一个网页，用户可以在其中登录到外部服务器。如果登录正确，我希望当前显示更改为用户的主页。建立连接后，我想转到子页面(例如列表页面)并向其附加信息。该信息将从服务器获取。
例如，来自服务器页面: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，例如登录表单。
<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 和导航历史记录中删除登录页面。当点击后退按钮时，用户将被重定向到登录页面。
关于javascript - 我可以连接到外部服务器并更改我的显示页面吗，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22545408/