0

所以我有一个html页面调用index.html，它看起来像：

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>sometitle</title>
<link rel="stylesheet" href="style.css" />  

</head>
<body>
<div id="Screen">
<section class="loginform cf">
    <form action="#" method="post" id="loginwindow">
        <ul>
            <li>
                <label for="usermail">Email</label>
                <input type="email" name="useremail" placeholder="youremail@email.com" required>
            </li>
            <li>
                <label for"password">Password</label>
                <input type="password" name="password" placeholder="password" required>
            </li>
            <li>
                <input type="submit" value="Check In">
            </li>
        </ul>
    </form>
</section>  

<script src="js/index.js"></script>
</div>
</body>
</html>

它有一个名为 index.js 的 js 文件，如下所示：

window.onload = function () {
var loginForm = document.getElementById('loginwindow');  
if ( loginwindow ) {
    loginwindow.onsubmit = function () {
        var useremail = document.getElementById('useremail');
        var password = document.getElementById('password');

        // Make sure javascript found the nodes:
        if (!useremail || !password ) {     
            load("LoopIt_DashBoard.html");
            return "success";
        }

    }
}
}

function load(url)
{

$("#Screen").load(url, function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});
test();

}

function test()
{

alert("test");

}
function test(string)
{

alert(string);

}

还有一个名为 LoopIt_DashBoard.html 的 html 文件，如下所示：

<div id="Screen">
<section  class="loginform cf">
    <form action="#" method="post" id="loginwindow">
        <ul>
            <li>
                <input type="submit" value="Check In">
            </li>
        </ul>
    </form>
</section>  
</div>

现在这段代码所做的是获取电子邮件和密码，并将两者进行比较。如果它们相等，那么它会使用 LoopIt_DashBoard.html 文件中的代码更改 div 中的 html 和 id Screen。但是，如果我取出仅调用警报的线路（我将其用于测试）

test();

从

function load(url)
{

$("#Screen").load(url, function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});
test();

}

那么这个功能不起作用，页面不会改变。如何在不使用警报的情况下更新我的视图。

4

3 回答 3

1

alert将暂停 JavaScript 函数的执行，允许由事件处理触发的任何其他 JavaScript 接管，导致当前事件处理程序的上下文丢失。

如果没有警报，您load()将被遗忘，因为您的onsubmit事件处理程序将正常返回，并允许发布表单数据，基本上刷新页面，尽管操作是"#"，因为它是一个 POST。所以你的视图可能正在更新，但是，文档也在重新加载，所以看起来它不是。

onsubmit()如果您自己处理表单，则需要取消表单。一种方法是返回false而不是"success".

于 2013-01-24T08:58:14.440 回答
0

你也在打错字......
它应该是你的if语句中的loginFrom而不是loginWindow。 

var loginForm = document.getElementById('loginwindow');  
      if ( loginForm )
于 2013-01-24T08:20:16.903 回答
0

如果这是原始代码，它不应该工作，因为你只是设置了名称属性：

HTML

...

<input type="email" name="useremail" placeholder="youremail@email.com" required>

...

Javascript

...
var useremail = document.getElementById('useremail'); //but you just set the Name Attribute
...

除了一些不干净的代码，看起来还不错。

我也会稍微清理一下代码，例如：

window.onload = function () {
var loginForm = $('#loginwindow')[0];  
if ( loginwindow ) {
    loginwindow.onsubmit = function () {
        var useremail = $('#useremail')[0];
        var password = $('password')[0];
        // Make sure javascript found the nodes:
        if ( useremail && password ) {     
            load("LoopIt_DashBoard.html");
            return "success";
        }

     }
   }
}

...

重要 这些函数相互覆盖，因为它们具有相同的名称

function test()
{
    alert("test");
}

function test(string)
{
    alert(string);
}

提示如果这不是原始代码，请检查/计算卷曲和正常的分支。这可以解释奇怪的现象。

于 2013-01-24T07:42:45.600 回答