0

だから私はindex.htmlを呼び出す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 という名前の 2 つ目の 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>

このコードが行うことは、電子メールとパスワードを取得し、2 つを比較することです。それらが等しい場合は、ID Screen の div 内の html を LoopIt_DashBoard.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();

}

この機能は機能せず、ページは変更されません。アラートを使用せずにビューを更新するにはどうすればよいですか。

4

3 に答える 3

1

alertJavaScript 関数の実行を一時停止し、イベント処理によってトリガーされた他の JavaScript が引き継ぎ、現在のイベント ハンドラーのコンテキストが失われるようにします。

アラートがないと、イベント ハンドラーが正常に戻り、フォーム データが投稿され、アクションがPOST であるため、基本的にページが更新されるload()ため、忘れられます。したがって、ビューはおそらく更新されていますが、ドキュメントも再読み込みされているため、そうではないようです。onsubmit"#"

onsubmit()自分で処理する場合は、フォームをキャンセルする必要があります。false1 つの方法は、の代わりに戻ることです"success"。

于 2013-01-24T08:58:14.440 に答える
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 に答える
0

あなたもタイプミスをしています...
ifステートメントではloginWindowではなくloginFromである必要があります。 

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