PHP - 动态反馈？

Question

我在我的网站上有一个基本的注册表单，我只是想知道什么是最好的方法是自动给输入字段提供反馈，而不必按下提交按钮。

例如，当用户输入他们的用户名时，如何让系统告诉他们在按下提交按钮之前用户名是否已被采用？

Regards

Answer 1

两个选项。对于任何给定的反馈，您可以：

1. 向页面提供所需的所有信息以提供反馈，可能是JavaScript代码。然后，当用户输入代码将执行其计算并作出相应反应的值时。
2. 通过AJAX查询服务器运行服务器端计算以提供反馈。

例如：

在第一种情况下，你可能要对证可能值小静列表。所以，你可能会发出这些值转换为JavaScript加载页面时：

var possibleValues = [ 'firstValue', 'secondValue', 'thirdValue' ]; 

（我知道，一个select将更有意义，这里是这样，但是这仅仅是例子的缘故）

然后当输入发生变化，JavaScript代码将根据已知值检查输入并相应地响应用户。

在第二种情形中，或许还有很多可能值，或者你不希望用户看到所有可能的值（如用一个用户名）和只想告诉他们，如果它是有效的或不。在这种情况下，您可以使用用户提供的信息发出AJAX请求。可能是这样的：

$.post("checkvalue.php", { name: $('#someInput').val() }) 
.done(function(data) { 
    // check the result from the server and respond to the user accordingly 
}); 

无论哪种情况，您都在编写JavaScript代码来响应用户的输入。唯一的区别在于JavaScript代码获取数据的位置或执行数据计算的位置。

Answer 2

您必须使用JavaScript来做到这一点。你可以在keyup或blur（至少这些可能会最好）。如果您在打字时需要反馈，请使用keyup。 blur，或者如果用户可以先聚焦（移动到下一个区域），那么它就可以工作。 KeyUp事件可能是这个样子：

var lastTime = 0; 
input.addEventListener("keyup", function() { 
    clearTimeout(lastTime); 

    // throttle input -- only check after 500 seconds 
    setTimeout(function() { 
     ajax.get("username-check.php?name=" + this.value) 
      .done(function (used) { 
       if (used) { 
        this.classList.add("error"); 
       } 
      }.bind(this)); 
    }.bind(this), 500); 
}); 

Answer 3

使用onchange事件的字段使用Ajax向服务器发送一个请求。然后检索响应并将结果显示给用户。

实施例的jQuery：

$('#username').on('change', function() { 
     //Create object to pass 
     var o = new Object(); 
     o.UserName = $('#username').val(); 

     //Stringify object into JSON 
     var x = JSON.stringify(o); 

     $.ajax({ 
      url: 'phpURL', 
      type: 'GET', 
      dataType: 'JSON', 
      data: x, 
      success: function (data) { 
       //Display Results (i.e Name taken/Name available) 
      }, 
      error: function (ajaxrequest) { 
       //Display a helpful error to the user or log this error for your use. 
       //ajaxrequest.responseText 
      } 
     }) 
    });