Question

我试图用ajax在组合框中显示数据库中的数据，但随后我运行了脚本，组合框仍然为空。

这是我的组合框

<select id="name" name="name">
    <option value= ""></option>
</select>

使用以下PHP脚本，我试图从数据库中选择数据：

<?php    
$servername = "localhost";
$username = "root";
$password = "pass";
$dbname = "db";

$conn = new mysqli($servername, $username, $password, $dbname) ;
if ($conn->connect_error) {
    die('Connection failed: ' . $conn->connect_error) ;
}else {

    $query = 'SELECT * FROM scu_stock';    
    $res = mysqli_query($conn, $query) ;
  if (mysqli_num_rows($res) > 0) {
     $result = mysqli_fetch_assoc($res) ;
    echo $result['name'];
  }else{
     $result = mysqli_fetch_assoc($res) ;
    echo "error";
  }    
} 
?>

以下代码应在组合框中输入数据：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
  function getCode() { 
    console.log("getCode before ajax", jQuery('#name').val());
    jQuery.ajax({ 
      url: './get/get1.php', 
      method: 'POST', 
      data: {'id' : jQuery('#name').val()},
      success: function(response){ 
        console.log("getCode after ajax", jQuery('#name').val());
        jQuery('#name').val(response);
      }, 
      error: function (request, status, error) { 
        alert(request.responseText); 
      }, 
    });                 
  } 
</script>

该脚本返回空，我看不到组合框中的任何更改。有人知道脚本出了什么问题吗？

更新1：

当我将组合框更改为文本框时，可以看到该文本框充满了数据。我无法从组合框中获取从数据库返回的数据。有人知道解决这个问题的方法吗？

这有效：

<input type="text" id="name" name="name" />

这不起作用：

<select id="name" name="name">
    <option value= ""></option>
</select>

Answer 1

在您的情况下，响应应为以下提到的格式的JSON数组。

 var response = [{"option": "option1", "value" : "option1"];

您需要根据选择的条件（例如，选项值是否与某些特定的字符串匹配）来选择默认的选定选项。

要呈现选择选项，您可以通过以下方式更改代码。

 function getCode() { 
   console.log("getCode before ajax", jQuery('#name').val());
   jQuery.ajax({ 
      url: './get/get1.php', 
      method: 'POST', 
      data: {'id' : jQuery('#name').val()},
      success: function(response){ 
         console.log("getCode after ajax", jQuery('#name').val());
         //jQuery('#name').val(response); // change this line based on your default selected line condition
         $.each(response, function(index,json){
             jQuery('#name')
                .append($("<option></option>")
                .attr({"value": response, "selected":"selected"}).text(response));
            });
      }, 
      error: function (request, status, error) { 
         alert(request.responseText); 
      }, 
   });                 
 }

您还可以摆脱波纹管线，因为它将通过JSON响应填充，无需添加空白选项。

<option value= ""></option>

希望它可以解决您的问题。

Answer 2

首先，您需要更改PHP以返回所有行：

 if (mysqli_num_rows($res) > 0) {
     $result = json_encode(mysqli_fetch_all($res)) ; // fetch all and json_encode()
  }else{
    $result = json_encode(array('error' => 'no rows returned'));
 }
 echo $result;

然后，您需要遍历AJAX中返回的结果以填充下拉列表：

success: function(response){ 
    console.log("getCode after ajax", jQuery('#name').val());
       $.each(response, function(index,json){
           jQuery('#name')
               .append($("<option></option>")
               .attr("value",response.value).text(response.value));
           });
       },

response.value将需要进行调整以匹配您在JSON中返回的内容。我们需要查看JSON才能告诉您确切要放在此处的内容。

使用Ajax在组合框中显示数据

2 个答案: