Question

好吧，我整天都在研究一个jQuery脚本，大多是调整它以使错误显示正确，并且突然间 - 代码停止工作。表格未提交或任何内容。

下面我已经包含了代码;我假设它在jQuery方面（即谷歌或其他东西），因为我将代码恢复到最后的工作配置，但仍然没有得到任何东西。

编辑：没有控制台错误，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>

Answer 1

代码存在一些问题，第一件事是在文档准备好后绑定到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>

Jquery随机停止工作

1 个答案: