javascript - 自动填写表格不起作用

我想创建表单，如果我填写第一个输入（即“rollnumber”），我希望其余的输入将自动填充来自mysql数据库的数据（如果我填写的“rollnumber”在数据库中找到）
如果在数据库中找不到“rollnumber”，则会说“rollnumber not found”。
如何实现这一目标？
以下代码的结果是：
自动填充不起作用，即使我填充了正确的“rollnumber”，数据也不会显示
唯一有效的是加载1，它在我填充数据后显示，但不会隐藏。
如果有人好心帮我尝试我的代码，看看有什么问题，这里是数据库（数据库名称：login）：
login.sql
到目前为止，这些是我的密码：
表单HTML:

<div class="form-group">
    <input type="text" name="rollnumber" id="rollnumber" tabindex="1" class="form-control" placeholder="Roll Number" value="">
    <img src="ajax-loader.gif" id="loading1"></img>
</div>
<div class="form-group">
    <input type="text" name="fname" id="fname" tabindex="1" class="form-control" placeholder="First name1" value="">
</div>
<div class="form-group">
    <input type="text" name="lname" id="lname" tabindex="1" class="form-control" placeholder="Last name" value="">
</div>
<div class="form-group">
    <input type="email" name="email" id="email" tabindex="1" class="form-control" placeholder="Email Address" value="">
</div>
<div class="form-group">
    <input type="text" name="phone" id="phone" tabindex="1" class="form-control" placeholder="Phone">
</div>
<div class="form-group">
    <input type="text" name="batch" id="batch" tabindex="1" class="form-control" placeholder="Batch">
</div>
<div class="form-group">
    <input type="text" name="lclass" id="lclass" tabindex="1" class="form-control" placeholder="Class">
</div>

Javascript代码：

$(document).ready(function()
{
    $("#loading1").hide();
    $("#rollnumber").change(function()
    {
            $("#loading1").show();
            var id = $("#rollnumber").val();
            var data = 'one=' + id;
            $.ajax
            ({
                type: "POST",
                url: "checkrollnumber.php",
                data: data,
                dataType: 'json',
                success: function (data)
                {
                    $("#loading1").hide();
                    if (data)
                    {
                        for (var i = 0; i < data.length; i++) { //for each user in the json response
                            $("#fname").val(data[i].fname);
                            $("#lname").val(data[i].lname);
                            $("#email").val(data[i].email);
                            $("#phone").val(data[i].phone);
                            $("#batch").val(data[i].batch);
                            $("#lclass").val(data[i].lclass);
                        } // for

                    } // if
                } // success
            }); // ajax
    });
});

checkrollnumber.php:

require_once "conn.php";
header('Content-type: application/json; charset=utf-8');
if(isset($_POST['one'])){
$json = array();
$id =  trim($_POST['one']);
$query = "SELECT fname, lname, email, phone, batch, lclass FROM users WHERE rollnum = ?";
$stmt = $DB_con->prepare($query);
    $stmt->bind_param('s', $id);
    $stmt->execute();
    $stmt->bind_result($nFname, $nLname, $nEmail, $nPhone, $nBatch, $nLclass);
while ($stmt->fetch()){
   $roll=array('fname'=>$nFname,'lname'=>$nLname,'email'=>$nEmail,'phone'=>$nPhone,'batch'=>$nBatch,'lclass'=>$nLclass);
    array_push($json,$roll);
}
echo json_encode($json, true);

 }

conn.php（连接）

$DB_host = "localhost";
$DB_user = "root";
$DB_pass = "";
$DB_name = "login";


try
{
    $DB_con = new PDO("mysql:host={$DB_host};dbname={$DB_name}",$DB_user,$DB_pass);
    $DB_con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e)
{
    $e->getMessage();
}

最佳答案

如果rollnumber不在数据库中，则应返回false，以便检查数组是否为空或不使用count()，请替换以下行：

echo json_encode($json, true);

签署人：

if( count($json) == 0){
     echo json_encode("false", true);
}else{
    echo json_encode($json, true);
}

然后是您的JS代码，您应该添加一个条件来显示如下内容：

$(document).ready(function(){
  $("#loading1").hide();

  $("#rollnumber").on('input', function(){
    $("#loading1").show();
    var id = $(this).val();

    $.ajax({
      type: "POST",
      url: "checkrollnumber.php",
      data: {one: id},
      dataType: 'json',
      success: function (data)
      {
        if (data == 'false')
        {
            alert("Rollnumber not found");
        }else{
          for (var i = 0; i < data.length; i++) { //for each user in the json response
            $("#fname").val(data[i].fname);
            $("#lname").val(data[i].lname);
            $("#email").val(data[i].email);
            $("#phone").val(data[i].phone);
            $("#batch").val(data[i].batch);
            $("#lclass").val(data[i].lclass);
          } // for

        } // if

        $("#loading1").hide();
      } // success
    }); // ajax
  });
});

注意："Rollnumber not found"参数应该像data一样发送。
我还建议使用data: {one: id}作为事件，因为跟踪使用输入时它更有效：

$("#rollnumber").on('input', function(){

希望对你有帮助。

关于javascript - 自动填写表格不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46524004/