php - 如何使用 PHP 和 jQuery AJAX 从数据库获取数据并将其分配给输入值

Question

在我的小应用程序中，我的数据库中有 owner 表。每个所有者都有他的 ID、姓名、地址和描述(这些是此表的列)。

在我的网站上，我有 select 元素，您可以在其中选择所有者。

在此选择下，我有 3 个输入(一项用于名称，一项用于地址，一项用于描述)。

当我更改选择元素中的选项时，我想使用 AJAX 使用数据库中的数据填充所有输入。

我的 PHP:

<?php
  $sql_select=$mysqli->prepare("SELECT id, name FROM owner ORDER BY id DESC");
  $sql_select->execute();
  $sql_select->store_result();
  $sql_select->bind_result($id_owner, $name_owner);
  $select = $_POST['owner'];
  echo "<option value=0 ".selected.">Select...</option>";
  while($sql_select->fetch()) {
    if($select == $id_owner){
      $selected="selected";
    }
    else {
      $selected="";
    }
    echo "<option value=".$id_owner." ".$selected." data-id=".$id_owner.">".$id_owner." ".$name_owner."</option>";
  }
?>
<label for="owner_name">Owner name</label>
<input id="owner_name" name="owner_name" type="text">
<label for="owner_address">Owner address</label>
<input id="owner_address" name="owner_address" type="text">
<label for="owner_description">Owner description</label>
<input id="owner_description" name="owner_description" type="text">

渲染的 HTML:

<select id="owner" name="owner">
  <option value="0" selected>Select...</option>
  <option value="1" data-id="1">1 ABC</option>
  <option value="2" data-id="2">2 DEF</option>
  <option value="3" data-id="3">3 GHI</option>
</select>
<label for="owner_name">Owner name</label>
<input id="owner_name" name="owner_name" type="text">
<label for="owner_address">Owner address</label>
<input id="owner_address" name="owner_address" type="text">
<label for="owner_description">Owner description</label>
<input id="owner_description" name="owner_description" type="text">

上面的代码从 MySQL 读取数据并为 select 创建选项。

到目前为止一切顺利。

我能够通过在 HTML 中设置 data-name、data-address 和 data-description 属性并分配来实现我的目标这 3 个属性从数据库到我选择的每个选项的正确数据，然后使用 jQuery 填充输入。渲染 PHP 后看起来像这样:

HTML:

<option value="0" selected>Select...</option>
<option value="1" data-id="1" data-name="ABC" data-address="London" data-description="Description of ABC owner">1 ABC</option>
<option value="2" data-id="2" data-name="DEF" data-address="Birmingham" data-description="Description of DEF owner">2 DEF</option>
<option value="3" data-id="3" data-name="GHI" data-address="Manchester" data-description="Description of GH~I owner">3 GHI</option>

JS:

$('#owner').change(function () {
  var changedOption = $(this).find('option:selected');
  var ownerName = changedOption.attr('data-name');
  var ownerAddress = changedOption.attr('data-address');
  var ownerDescription = changedOption.attr('data-description');
  $('#owner_name').val(ownerName);
  $('#owner_address').val(ownerAddress);
  $('#owner_description').val(ownerDescription);
});

但是有一个问题，假设我有 1000 个所有者，并且需要将多少数据分配到 HTML 中。我想使用 AJAX 从数据库中读取每次选择更改的数据，以避免使用 HTML 数据属性。

关于CODEPEN的小例子明白我的意思。

有人可以告诉我从哪里开始吗？

Answer 1

例如，您想要向某个网址发出请求并获取包含您需要的数据(id、名称等)的 JSON 响应，如下所示:

{
    "ID":"1",
    "name":"Bobby Longsocks",
    "address":"some place",
    "description":"A description here"
}

使用 jQuery 有 various ways现在您拥有这种格式的数据，要做您需要做的事情，一种方法是使用 $.get - 这对于本示例来说是合适的，因为这就是下面的 PHP 将要寻找的内容。

你可以这样做:

$('body').on('change', '#owner', function () {
    var changedOption = $(this).find('option:selected').val();
    var data = {
        "user_id" : changedOption
    };
    $.get('ajax.php', data, function (response) {
        $('#owner_name').empty().html(response.name);
        $('#owner_addr').empty().html(response.address);
        $('#owner_desc').empty().html(response.description);
    }, 'json')
});

如果用户选择是这样的:

<option value="1" data-id="1">1 ABC</option>

请求的网址将为ajax.php?user_id=1

<小时/>

所以...要使用 PHP 获取响应，您可以使用 json_encode将 JSON 响应发送回客户端:

假设您的服务器上有一个名为 ajax.php 的文件，其中将包含以下 php:

(我更喜欢 PDO 所以我将用它作为一个简单的例子)

<?php
try {
    // Set up the response
    $response = array();
    // DB details
    $db = new PDO(your_db_details);
    // Read 
    if ( $_SERVER['REQUEST_METHOD'] == "GET" ) {
        // Dont forget to sanitize!
        $user_id = $_GET['user_id'];
        // Build the query
        $stmt = $db->query("SELECT `ID`, `name`, `address`, `description` FROM `your_table` WHERE `id` = '$user_id'");
        if ($user_id) {
            // If the ID is set, fetch the record
            $response = $stmt->fetch(PDO::FETCH_ASSOC);
        }
        else {
            // Do something if no id was set
        }
        // Encode it as JSON and ship it back
        echo json_encode($response);
    }

} catch(Exception $e) {
    // Do some error handling
}
?>

这将返回我们开始时的响应。