javascript - 无法在输入表单提交中捕获未定义的错误

Question

使用 parse.com 和 javascript/jquery。

下面的代码应该捕获用户在“friendsearch”输入框中的输入。

单击提交按钮后，它应该查询 parse.com 后端并查明用户是否存在。目前，我一直在“friendName”中返回“undefined”，我无法找出原因或导致错误的原因？

  <form class="Find Friend">

        <div class="error" style="display:none"></div>
        <input type="text" id="friendsearch" placeholder="Find Friend" class="input-field" required/> 
        <button type="submit" class="btn btn-login">Find</button> 
</form>

---

var friendName;

$('#friendsearch').on('keyup', function(e) {
   friendName = $(this).val();
});

var friendFinder = Parse.Object.extend("_User");
var query = new Parse.Query(Parse.User);
query.equalTo("username", friendName);  // find users that match
query.find({
success: function(friend) {
alert(friendName); 
  },
    error: function (error) {
 //Show if no user was found to match

 alert("Error: " + error.code + " " + error.message);
     }

});

Answer 1

好的，我修改了您的代码，使 friendName 变量实际上包含了您表单上输入框的内容。问题在于您的原始代码甚至在将输入框加载到 DOM 之前就试图访问它的内容。

为您的 HTML 尝试这个:

<form class="Find Friend">
        <div class="error" style="display:none"></div>
        <input type="text" id="friendsearch" placeholder="Find Friend" class="input-field" /> 
        <button id="find_button" type="submit" class="btn btn-login">Find</button> 
</form>

这是你的 javascript:

var friendName;

function findFriend(){
    friendName = $('#friendsearch').val();
    alert(friendName);

    var friendFinder = Parse.Object.extend("_User");

    var query = new Parse.Query(Parse.User);
    query.equalTo("username", friendName);  // find users that match
    query.find({
    success: function(friend) {
    alert(friendName); 
      },
        error: function (error) {
     //Show if no user was found to match

     alert("Error: " + error.code + " " + error.message);
         }

    });   
}

$('#find_button').click(function(e){
    findFriend();
});

我在这里更新了实时 jsFiddle 示例:http://jsfiddle.net/LWA48/2/

在 jsFiddle 示例中，当您单击按钮时，Parse 对象打印 {"error": "Please use POST request"}，但至少您的 friendName 变量包含您在框中键入的名称!希望这可以帮助您完成剩下的工作。