使用 PHP 和 jquery AJAX 根据选定的下拉值从数据库中检索数据 [关闭]

Question

我在下面更新了我的代码，我的 php 代码出现“500（内部服务器错误）”。

我对 PHP 和 jQuery、Ajax 还很陌生，而且我一直很难在 Internet 上找到一个可以帮助我解决问题的示例。任何人都可以向我解释我如何能够根据所选下拉列表的值将数据从数据库显示到 html TABLE 中，一种过滤器。

我已经设法从数据库中加载了所有数据并且可以正常工作，我尝试在网上寻找示例但找不到任何示例。

添加代码： HTML 代码：

                <select name="countryN" id="countryCB">
                <?php
                while($rows = $resultSet->fetch_assoc())
                {
                    $country = $rows['Country'];
                    echo "<option value='Test'>$country</option>";
                }
                ?>
                </select>

                <input type="button" class="srchbtn" value="Seach">
            
            </div>
        </div>
        <div class="item-container">
            <div id="items">
                <table id="brtable">
                    <thead>
                        <tr class="tblrow" id="headers">
                            <th>BR-Name</th>
                            <th>Country</th>
                            <th>Data Stream</th>
                            <th>Region</th>
                            <th>Actions to be taken</th>
                        </tr>
                    </thead>
                    <tbody id="tableresult">

                    </tbody>
                </table>
            </div>
        </div>

PHP 代码：

<?php   
$connect = mysqli_connect('127.0.0.1', 'root', '', 'testdb'); 
$countryN = $_POST['Country'];
$brfilterresult = ("SELECT Business_Rule_Name, Country, Data_Stream, Region,         
ActionNeeded FROM businessrulestbl WHERE Country='".$countryN."'");


$result = $connect->query($brfilterresult);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
    echo "<tr><td>" . $row['Business_Rule_Name'] . "</td>";
    echo "<td>" . $row['Country'] . "</td>";
    echo "<td>" . $row['Data_Stream'] . "</td>";
    echo "<td>" . $row['Region'] . "</td>";
    echo "<td>" . $row['ActionNeeded'] . "</td></tr>";
}
}
?> 

JS代码：

$(document).ready(function(){
$('#countryCB').change(function(){
    var countryName = $(this).val();
    $.ajax({
        url:"../php/getbr.php",
        method: "POST",
        data: {countryName:countryName},
        success: function(data){
            $('#tableresult').html(data);
        }
    });
});
});

我只是希望有人向我解释如何以详细的方式实现我的目标，解释每个部分。一个示例源代码会很棒。

Answer 1

在您的代码中进行一些更正。

1.) 在 HTML 代码中的选择下拉选项中

echo "<option value='$country'>$country</option>";

2.) 在 javascript 代码中（缺少 # 用于调用元素的 id）

 $(document).ready(function (){
        $('#countryCB').on('change', function() {
            fetchRecordsfromDB(this.value);
            // alert(this.value);
        });
        });

3.) 在 PHP 脚本中（$_REQUEST[] 中缺少 'id' 参数）和选择查询中的字符串引用

$countryN = $_REQUEST['id'];

 $brfilterresult = ("SELECT Business_Rule_Name, Country, Data_Stream, 
 Region, ActionNeeded FROM businessrulestbl WHERE Country='".$countryN."'");

希望对你有所帮助。 如果您有更多帮助，请告诉我。 快乐编码:)

Answer 2

function fetchRecordsfromDB($id){
  $.ajax({
      url: "your_php_file_url.php",
      cache: false,
      type: "POST",
      data: {id : $id},
      success: function(data){
        $("#tbale").html(data);
      }
  });

Answer 3

好的。所以你需要一些Javascript代码来做到这一点。 首先，在您的 HTML 中创建下拉菜单并创建一个 Ajax 方法并将下拉选择的值传递给它。然后将这些数据保存在您的 PHP 端并执行您的 SQL 查询并在您的 HTML 页面上显示结果。

例如：

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

Javascript：

$('select').on('change', function() {
  fetchRecordsfromDB(this.value);
});

function fetchRecordsfromDB(data){
  $.ajax({
      url: "your_php_file_url.php",
      cache: false,
      type: "POST",
      data: {id : data},
      success: function(html){
        $("#tbale").append(html);
      }
  });
}

PHP端：

your_php_file_url.php

if (isset($_POST["id"]) && !empty($_POST["id"])) {
    $id = $_POST['data'];
}

现在您可以通过 $id 变量执行 SQL。