Question

所以我有一个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文件中的代码的id屏幕更改div中的html。但是，如果我拿出简单地调用警报的行（我用它进行测试）

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();

}

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

Answer 1

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

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

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

Answer 2

如果这是原始代码，则它不起作用，因为您只需设置名称属性：

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); }

提示如果这不是原始代码，则检查/计数braches卷曲和正常。这可以解释这种奇怪的现象。

Answer 3

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

var loginForm = document.getElementById('loginwindow');  
      if ( loginForm )

当我在我的函数中有警报时，为什么我的视图会更新，但是当我没有警报时却没有

3 个答案: