javascript - jQuery .html() 返回 null

Question

我有一个 ID 为“id_email”的输入字段。用户将在我的表单上的此字段中输入他的电子邮件。我正在尝试对用户输入的电子邮件运行一些验证代码。我想将输入的值传递给服务器以将其与数据库进行比较，但 jQuery 一直返回一个空字符串。

HTML:

<div class="fieldWrapper">
                <label for="email">Email</label>
                <input type="text" placeholder="Email" id="id_email" name="email" maxlength="75">
           </div>

Javascript:

function CheckDuplicateEmail(invalidForm)
{
  $("#id_email").focusout(function()
  {
    $.ajax({ type: "POST",
             url: "/CheckDuplicateEmail/",
             dataType: "json",
             data: {"email" : $("#id_email").html()},
             success: function(jsonObject) 
             { 
                if (jsonObject === "exists")
                {
                    $("this").append("<ul class=\"errorlist\"><li>This email already exists<li></ul>")
                    invalidForm = true;
                }
                else
                {
                    invalidForm = false;
                }
             }
    });
  });
}

当我查看发送到服务器的 AJAX 帖子时，我可以看到电子邮件是空白的。 $("#id_email").html() 行失败。我知道选择器工作正常，因为 AJAX 请求已发送到服务器。这意味着 $("#id_email").focusout 工作正常。由于此语句使用与 $("#id_email").html() 语句相同的选择器，因此我必须假设 html() 函数是错误的。请注意，我尝试了具有相同结果的 text() 函数。

有人知道哪里出了问题吗？

Answer 1

使用$("#id_email").val()

function CheckDuplicateEmail(invalidForm)
{
  $("#id_email").focusout(function()
  {
    $.ajax({ type: "POST",
             url: "/CheckDuplicateEmail/",
             dataType: "json",
             data: {"email" : $("#id_email").val()},
             success: function(jsonObject) 
             { 
                if (jsonObject === "exists")
                {
                    $("this").append("<ul class=\"errorlist\"><li>This email already exists<li></ul>")
                    invalidForm = true;
                }
                else
                {
                    invalidForm = false;
                }
             }
    });
  });
}

您可以查看this post了解更多何时使用 .html()、.val() 和 .text()

等 setter/getter