使用 Ajax 从数据库和 php 中获取数据

Question

我想使用 Ajax 从文本输入中发送数据并将结果（来自数据库）设置到另一个输入中

我尝试使用 json_encode() 将结果解析为 json，由于某种原因它不起作用，作为解决方案，我在结果 php 页面中创建了一个 div，我得到了带有内容的 div

index.php

    <div class="form-group col-4">
        <label for=""> Code:<span style="color:red;">*</span></label>
        <input type="text" class="form-control form-control-sm" id="codecli" name="codecli" onkeyup="showinfoclient()" required>
    </div>

    <div class="form-group col-8 " id="mess">
    </div>
</div>

<div class="minfoclient">
    <div class="form-row">
        <div class="form-group col-6">
            <label for=""> Lastname:<span style="color:red;">*</span></label>
            <input type="text" class="form-control form-control-sm" id="lastname" name="lastname" value="" required>
        </div>

        <div class="form-group col-6">
            <label for=""> Firstname:<span style="color:red;">*</span></label>
            <input type="text" class="form-control form-control-sm" id="firstname" name="firstname" value="" required>
        </div>
    </div>

client.php if ($_REQUEST['idcli']) {

  $idcli = strip_tags($_POST['idcli']);
  $iduser = $_SESSION['user_id'];
  $clients = $conn->query("SELECT * FROM `client` WHERE 
`Current_user`=$iduser AND `id_client`='$idcli'");

while($client = $clients->fetch_assoc()){
?>
    <div class="minfoclient">

        <div class="form-row">
            <div class="form-group col-6">
                <label for=""> Lastname:<span style="color:red;">*</span></label>
                <input type="text" id="nom" class="form-control form-control-sm namm"  name="lastname" value="<?=$client['lastname'];?>">
            </div>

        <div class="form-group col-6">
            <label for=""> Firstname:<span style="color:red;">*</span></label>
            <input type="text"  id="prenom" class="form-control form-control-sm" name="firstname" value="<?=$client['firstname'];?>">
        </div>

    </div> ...

此代码有效，但没有异常，因为它阻止了其他任务

function showeinfoclient(){
  var iDClient = $('#codecli').val();
  if (iDClient) {
    $.ajax({
      type:'POST',
      url:'client.php',
      data:'idcli='+iDClient,
      success:function(data){
        $('.minfoclient').html(data);
      }
    });
  }
}

作为解决方案，我希望您提供一个简单的代码（AJAX、JSON 和 PHP）

Answer 1

在client.php中

$response=array();

while($client = $clients->fetch_assoc()){
$response[]=$client;
}
echo json_encode($response);

在 ajax 响应之后，您必须为每个客户端信息创建输入元素进行 for 循环。

ajax 响应：-

success:function(data){
     var clients=$.parsJSON(data);
var htmlData="";
     if(client.length>0){

       for(i=0;i<client.length;i++){
             htmlData += "<input type='text' name='firstname' value='"+client[i].firstname+"'><br>";
             htmlData += "<input type='text' name='lastname' value='"+client[i].lastname+"'><br>";
       }
        $('.minfoclient').html(htmldata);
      }
}

Answer 2

请更新JS代码和PHP代码。

JS代码：

function showinfoclient(){
  var iDClient = $('#codecli').val();

    if (iDClient) {
        $.ajax({
        type:'POST',
        url:'client.php',
        data:JSON.stringify(iDClient),
        dataType:'json', 

        })
        .done(function( json ) { 

            $('#lastname').val(json.lastname);
            $('#firstname').val(json.firstname);

        })
        .fail(function( xhr, status, errorThrown ) {

          alert( "Sorry, there was a problem!" );
          console.log( "Error: " + errorThrown );
          console.log( "Status: " + status );
          console.dir( xhr );
        });

    }
}

PHP 代码（client.php）：

$input = urldecode(file_get_contents('php://input'));
$iDClient = json_decode($input,true);

// code to fetch firstname and lastname from database
$client = array('firstname' => 'John', 'lastname' => 'Doe'); // raw data


echo json_encode($client);