1

さて、私は 1 日中 jQuery スクリプトに取り組んでおり、主にエラーが適切に表示されるように微調整していましたが、突然、コードが機能しなくなりました。フォームが送信されていません。

以下にコードを含めました。コードを最後の作業構成に戻しましたが、まだ何も取得していないため、jQuery側の何か(つまり、Googleなど)を想定しています。

編集: コンソール エラーはありません。jQuery は送信されていません。それが私が抱えている問題です。

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title>Login Test</title>
<link rel='stylesheet' href='theme/default/style.css' />
</head>
<div id='alert' class='hidden'>
Error
</div>
<body>
<div id='welcome_holder'>
<table cellpadding="0" cellspacing="0" id='welcome'>
<form method='post' action='actionlog.php' id='login'>
<tr>
<th colspan='3'><h3>Citizen Login</h3></th>
</tr>
<tr>
    <td class='user'>Username</td><td class="user">:</td><td class="user"><input type='text' name='username' id='username'></td></tr>
<tr>
    <td class='pass'>Password</td><td class="pass">:</td><td class="pass"><input type='password' name='password' id='password'></td>
</tr>
<tr><th colspan='3'><input type='submit' /></th></tr>
<tr><th colspan='3'><span style='font-size: 12px;'>Don't have an account? <a href='register.php'>Register Today!</a><br /> Forgotten Password/Username?</span></th>
</tr>
</form>
</table>
</div>

<script type='text/javascript'>
  $('#login').submit(function() {
        $.ajax({
            url: 'actionlog.php',
            type: 'POST',
            data: {
                  username: $('#username').val(),
                  password: $('#password').val()
            },
            success: function(data) {
                if(data == 'true')
                { location.reload(); } 
                else
                {
                    $('#alert').addClass('show');
                }

            }
        });
        return false;
    });
</script>
4

1 に答える 1

0

コードにはいくつかの問題がありました。まず、ドキュメントの準備ができたら dom イベントにバインドします。最も重要なことは、フォームを送信するときに、これを使用してイベントを防止する必要があることですevent.preventDefault()。フォームのメソッドを使用してフォームのアクションを実行するためのブラウザーを停止します (別名、URL への投稿)。これらの変更を反映するようにコードを更新し、修正しました。質問へのコメントに基づく HTML。

<html>
<head>
    <title>Login Test</title>
    <link rel='stylesheet' href='theme/default/style.css' />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type='text/javascript'>
    // use $(document).ready(function(){}) 
    // $(function(){}) is a shortcut for ready function
    $(function(){
        $('#login').submit(function(e) {
            // stop the form from submitting and allow the ajax to run
            e.preventDefault();
            $.ajax({
                url: 'actionlog.php',
                type: 'POST',
                data: {
                      username: $('#username').val(),
                      password: $('#password').val()
                },
                success: function(data) {
                    if(data == 'true')
                    { 
                        location.reload(); 
                    } 
                    else
                    {
                        $('#alert').addClass('show');
                    }
                }
            });
            return false;
        });
    });
    </script>
</head>
<body>
    <!-- alert div needs to be in body tag -->
    <div id='alert' class='hidden'>Error</div>
    <div id='welcome_holder'>
        <!-- form outside of table -->
        <form method='post' action='actionlog.php' id='login'>
            <table cellpadding="0" cellspacing="0" id='welcome'>
                <tr>
                    <th colspan='3'><h3>Citizen Login</h3></th>
                </tr>
                <tr>
                    <td class='user'>Username</td>
                    <td class="user">:</td>
                    <td class="user"><input type='text' name='username' id='username'></td>
                </tr>
                <tr>
                    <td class='pass'>Password</td>
                    <td class="pass">:</td>
                    <td class="pass"><input type='password' name='password' id='password'></td>
                </tr>
                <tr>
                    <td colspan='3'><input type='submit' /></td>
                </tr>
                <tr>
                    <td colspan='3'>
                        <span style='font-size: 12px;'>Don't have an account? <a href='register.php'>Register Today!</a><br /> Forgotten Password/Username?</span>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>
于 2013-07-20T03:36:52.543 に答える