Question

我想创建表单，如果我填写第一个输入（即＆＃39; rollnumber＆＃39;），我希望其余的输入将自动填充来自mysql数据库的数据（如果＆＃39; rollnumber＆＃39;我填写的数据库中找到了）如果＆＃39; rollnumber＆＃39;在数据库中找不到它会说＆＃34;没有找到Rollnumber＆＃34;。如何实现这一目标？

以下代码的结果是：

自动填充功能无法正常工作，即使我填写正确的数据也不会显示数据＆＃39; rollnumber＆＃39;
唯一可行的是＃loading1，它在我填充数据后显示，但它不会隐藏回来。

如果有人帮助我尝试我的代码以查看错误，这里是数据库（数据库名称：登录）：

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();
}

Answer 1

如果rollnumber不在数据库中，则应返回false，因此，为此，您可以使用count()检查数组是否为空，请替换以下行：< / p>

echo json_encode($json, true);

通过：

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

然后是你的JS代码，你应该添加一个条件来显示"Rollnumber not found"，如：

$(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
  });
});

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

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

希望它会对你有所帮助。

Answer 2

请勿声明与关键字类似的变量，就像您声明变量data一样，这与data中的ajax关键字混淆。

var data = 'one=' + id;

此外，更改以下代码行

 data: data,

到

 data: {one : $("#rollnumber").val() },

自动填充表单不起作用

2 个答案: