Question

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="login.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script src="jquery.serializeJSON.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("#submit-button").click(function(e)
{
  var username = JSON.serialize($('#username').val().toLowerCase());
  console.log($('#username').val());


});
});
</script>
<div class="login-container">
  <div class="title">Login Form</div>
  <div class="form-fields">
  <form name="login-form" id="login-form" method="POST">
    <input type="text" name="username" placeholder="Username" required></input>
    <input type="password" name="password" placeholder="Password" required></input>
    <input type="submit" value="Log in" id="submit-button"></input>
  </form>
</div>

我尝试在序列化后记录用户名变量，但是console.log没有在函数中打印任何内容。在这种情况下调试的最佳方法是什么。

Answer 1

将字符串转换为小写的方法是toLowerCase，而不是toLowerCaser，并且字符串上没有serializeJSON方法。您可以使用JSON.serialize方法：

var username = JSON.serialize($('#username').val().toLowerCase());

要查找类似的错误，您应该在浏览器中查看错误日志，它应该显示一条错误消息，指出toLowerCaser不是函数。这应该告诉你，或许这不是调用方法的内容，而是在文档中查找（例如https://developer.mozilla.org/en-US/）。修复后，serializeJSON会出现相同的错误。

要使用console.log进行调试，您可以拆分步骤并逐步检查结果。例如：

// check if jQuery found anything
console.log($('#username').length);
// check what the text is
console.log($('#username').val());
// check if toLowerCaser works
console.log($('#username').val().toLowerCaser());
// check if serializeJSON works
console.log($('#username').val().toLowerCaser().serializeJSON());

编辑：

当您也显示HTML代码时，我发现它不包含id="username"的任何元素，因此$('#username')将是一个空的jQuery对象。

如果您尝试console.log($('#username').length);，您会看到它写出0。

来自函数内的JavaScript console.log

1 个答案:

编辑：