Question

我正在构建一个登录表单，它将根据数据库验证登录，然后如果成功将用户传递到安全页面。

我已经验证我的SQL是正确的，并且根据我借用代码的示例，我的提交表单也应该是正确的。实际上，sample code在我的服务器上正常工作，这表明存在DOM错误。这是我正在运行的精简版：

<script type="text/javascript" src="inc/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
    jQuery("#login_form").submit(function() {
        jQuery("#msgbox").removeClass()
                         .addClass('messagebox')
                         .text('verifying')
                         .fadeIn(1000);

        jQuery.post("inc/ajax_login.php", {
            user_name: $('#username').val(),
            password: $('#password').val()
        }, function(data) {
            if (data == 'yes') { /* ... */
            }
            else { /* ... */
            }
        });
        return false;
    });
});
</script>

因此，表格会在页面的下方显示：

<form action="" id="login_form" method="POST">
  <input type="text"     name="username" id="username" value="username" />
  <input type="password" name="password" id="password" value="password" /><br />
  <input type="hidden"   name="homeDir"  id="homeDir"  value=""         /> <span id="msgbox"></span> <br />
  <input type="submit"   name="Submit"    id="submit"    value="ENTER" class="submit"/>
</form>

然而，JS抛出一个错误，说“未捕获的TypeError：无法调用方法'val'为null。”

我在这里遗漏了一些东西。鉴于在提交表单之前未调用.post（并且在提交表单之前错误未触发），为什么会针对空值调用val()？那时表格将被填充。

另外，我住在PHP4.4.9服务器上。据我所知，这不是一个JSON调用（因此PHP5），但我会自由地承认我在这里。 Webdev对我而言是前世，从来都不是我的强项。

Answer 1

您试图在非jquery对象上调用val()。当您使用jQuery.noConflict模式时，'$'将是未定义的。尝试像这样包装你的jquery代码......

请参阅jQuery.noConflict doc - http://api.jquery.com/jQuery.noConflict/
各种使用jQuery.noConflict的方法 - http://zenverse.net/jquery-how-to-fix-the-is-not-a-function-error-using-noconflict/

<script>

jQuery.noConflict();

(function($) { 
    $("#login_form").submit(function()
    {
        $("#msgbox").removeClass().addClass('messagebox').text('verifying').fadeIn(1000);

        $.post("inc/ajax_login.php", {
            user_name: $('#username').val(),
            password: $('#password').val()
        }, function(data) {
          if(data=='yes') {/* ... */}
          else {/* ... */}
        });

        return false;
    });
})(jQuery);

</script>

Answer 2

您也可以使用

<script>

jQuery.noConflict();


jQuery("#login_form").submit(function()
{
    jQuery("#msgbox").removeClass().addClass('messagebox').text('verifying').fadeIn(1000);

    jQuery.post("inc/ajax_login.php", {
        user_name: jQuery('#username').val(),
        password: jQuery('#password').val()
    }, function(data) {
      if(data=='yes') {/* ... */}
      else {/* ... */}
    });

    return false;
});

</script>

通过jQuery.post进行表单验证，返回'null'错误.val（）返回'null'错误

2 个答案: