Onchange 下拉过滤表 json

Question

我有 4 个选择下拉菜单，每个下拉菜单都按特定字段进行过滤，并且希望在用户在任一选择中选择选项后立即过滤表格。

请注意，此表从服务器端 json 文件中获取数据。

我正在尝试使用 ajax 调用获取表数据并将其存储在 json 文件中的同一 PHP 文件，然后通过为选择数据添加 WHERE 子句来放置条件并稍微更改查询：

/* drop-down menu variables */
$dd_fname = $_POST["first_name"];
$dd_lname = $_POST['Last_name'];
$dd_category = $_POST['category'];
$dd_group = $_POST["group"];

if (isset($_POST['first_name'])) { //filter. THIS IS WHAT IS GETTING IGNORED
$stmt = "SELECT first_name, Last_name, category, group\n"
. "\n"
. "FROM users
. "\n"
. "WHERE first_name =$dd_fname";
$result = mysqli_query($mysqli, $stmt);
$num_rows = mysqli_num_rows($result);
}

else { //no filter. initial data. THIS ALWAYS EXECUTES NO MATTER WHAT
$stmt = "SELECT first_name, Last_name, category, group\n"
. "\n"
. "FROM users";

$result = mysqli_query($mysqli, $stmt);
$num_rows = mysqli_num_rows($result);
}

/*
CODE TO ADD TO JSON FILE AND ECHO TO TABLE IS AFTER THIS
*/

所以在初始加载时会显示该表。但是，当用户选择过滤选项时，我希望 ajax 更新 php 文件中的下拉变量（因为 onload 它们是空的）以触发具有 isset 的 sql 查询并用过滤结果覆盖 json。我的问题是这个 isset 块被忽略并且总是返回初始的未过滤数据。

/*AJAX Code runs onclick for now*/
function filter_drop_down() {

//get all 4 select tag data
    var first_name = document.getElementById('first_name').value;
    var last_name = document.getElementById('last_name').value;
    var category = document.getElementById('category').value;
    var group = document.getElementById('group').value;

    if ((first_name || last_name || category || group) === '') {
        alert("Select at least one option to use the filter");
      return false;
    }

//send the filter variables to the server
    var xhr;
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
        xhr = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE 8 and older
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    var data = "dd_fname=" + first_name + "&dd_lname=" + last_name + "&dd_categoryr=" + category + "&dd_group=" + group;
    xhr.open("POST", "fileThatGetsDataForTable.php", true);
    /************************************************/

    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(data);

}

更新： 我在让表格通过 AJAX 显示新查询的数据时遇到问题：

if (!empty($_POST['first_name'])) { //filter. ***FIXED***
    $stmt = "SELECT first_name, Last_name, category, group\n"
    . "\n"
    . "FROM users
    . "\n"
    . "WHERE first_name =$dd_fname";
    $result = mysqli_query($mysqli, $stmt);
    $num_rows = mysqli_num_rows($result);
    }

并且在查看xhr返回时，json文件还没有更新

更新： 一些进展。我已经进行了一些调试，现在当 php 文件即将写入过滤的 JSON 数据时，我得到了一个（500 内部服务器错误）。这个错误来自我的 AJAX；特别是这一行：

xhr.send(data);

这可能是什么原因造成的？ AJAX 已经成功发送了选择下拉变量（我在调试 php 时确实看到了这些）。

更新： 经过研究，似乎 500 错误是由我设置 mysqli_fetch_assoc 函数的方式引起的。

     while ($row = mysqli_fetch_assoc($result)) {
       $cart[$i] = array(
         "First Name" => htmlspecialchars($row['first_name']),
         "Last Name" => htmlspecialchars($row['last_name']),
         "Category" => htmlspecialchars($row['category']),
         "Group" => htmlspecialchars($row['group']),
       );
       $i = $i + 1; //add next row
     }
    //encoding the PHP array
    $json_server_pagination_data = array(
        "total" => intval($num_rows), // total rows in data
        "rows" => $cart, //array data
    );

    echo json_encode($json_server_pagination_data); 
} else {
    //do nothing . no data in sql query
}

像往常一样，一个问题导致另一个问题。我现在可以访问过滤后的数据（在 HTML 页面 VIA PHP 和 VIA JAVACRIPT 中），但我不知道如何覆盖第一次加载到表 onload 的初始数据。我以为写另一个 echo json_encode($json_server_pagination_data) 会覆盖它，但事实并非如此。

Answer 1

只要您发送表单，该变量就会始终为 SET。

所以最好检查变量是否为空。

if(!empty($_POST['var']))

https://stackoverflow.com/a/21123685/1889605

跟进

关于错误，您说在服务器上写了一个 500 错误，但您提到了客户端上的错误 (xhr.send(data);)？

首先enable error reporting，这样你就可以看到服务器出了什么问题。

其次，使用控制台调试JS：

console.log(data);
xhr.send(data);

或者更好的是，只需通过开发人员工具中的网络选项卡检查整个请求。