通过 ajax 将表单数据传递给 php 并加载到数据表中

Question

几天来一直在努力寻找解决方案，任何建议都会有所帮助，而 jsfiddle 会很棒。

我可以在没有使用常规表的数据表插件的情况下完成以下工作 不用担心安全性，我稍后会应用。 我只是非常希望数据表显示我返回的数据

问题来了 :
- 我有一个包含 4 个输入的表单，用户必须至少选择其中一个。 - 提交时需要将数据发送到 PHP 脚本，该脚本将搜索数据库并返回多行数据 - 我想使用 Datatables 插件显示该数据

这是我的 HTML 代码：

<section class="div-wrapper">
  <form role="form" class="form-inline" action="process.php" method="post" id="search_form">
    <div class="row">
      <div class="col-lg-3">
        <label for="search_brand" class="control-label lab-format search-labels">Product Brand</label>
        <select name="search_brand" id="search_brand" class="form-control input-sm">
          <option value="">-Select-</option>
          <option value="M">M</option>
          <option value="S">S</option>
          <option value="A">A</option>
        </select>
      </div>
      <div class="col-lg-3">
        <label for="search_serial" class="control-label lab-format search-labels">Serial Number</label>
        <input type="text" name="search_serial" id="search_serial" class="form-control input-sm" placeholder="Serial Number">
      </div>
      <div class="col-lg-3">
        <label for="search_id" class="control-label lab-format search-labels">Inventory ID</label>
        <input type="text" name="search_id" id="search_id" class="form-control input-sm" placeholder="Inventory ID">
      </div>
      <div class="col-lg-3">
        <label for="search_imei" class="control-label lab-format search-labels">IMEI # 1</label>
        <input type="text" name="search_imei" id="search_imei" class="form-control input-sm" placeholder="IMEI # 1">
        <input type="submit" name="search" value="Search" id="search" class="submit-button pull-right">
      </div>
    </div>
  </form>
</section>

<div>
  <h4>Search Results</h4>
</div>
<section id="search_result_success" class="div-wrapper" style="">
  <div class="table-responsive">
    <table class="search-output-table table table-hover table-responsive cust-output" id="search_success_output_table">
      <thead>
        <tr>
          <th id="table-item">Item ID</th>
          <th id="table-brand">Brand</th>
          <th id="table-model">Model Code</th>
          <th id="table-imei1">IMEI</th>
          <th id="table-serial">In Value</th>
          <th id="table-cr-date">Location</th>
          <th id="table-status">Status</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
</section>

这是我的 Jquery 代码：

$("#search_form").submit(function(e) {
  isValid_src = true;

  if ($.trim($("#search_serial").val()) == '' &&
    $.trim($("#search_brand").val()) == '' &&
    $.trim($("#search_id").val()) == '' &&
    $.trim($("#search_imei").val()) == '') {
    isValid_src = false;
    $("#search_serial, #search_brand, #search_id, #search_imei").css({
      "border": "1px solid red",
      "background-color": "#ffcccc"
    });
  } else {
    $("#search_serial, #search_brand, #search_id, #search_imei").css({
      "border": "",
      "background-color": ""
    });
  }

  if (isValid_src == false) {
    e.preventDefault();
  } else {
    e.preventDefault();
    var str_inv_search = $("#search_form").serialize();
    $("#search_success_output_table").children("tbody").remove();
    $('#search_success_output_table').DataTable({
      "processing": true,
      "destroy": true,
      "ajax": {
        "url": "process_inv_search.php",
        "type": "POST",
        "data": {
          str_inv_search
        }
      },
      "columns": [{
        "data": "item_code"
      }, {
        "data": "brand"
      }, {
        "data": "model_code"
      }, {
        "data": "imei1"
      }, {
        "data": "in_value"
      }, {
        "data": "rack_location"
      }, {
        "data": "delete_flag"
      }],
      "order": [
        [6, "asc"]
      ]
    });
  }
});

我的 PHP 代码：

if(isAjax()){
  if($_POST['search_serial'] != NULL){
    $post_inv_sr = $_POST['search_serial'];
    $q = "sr_num = '{$post_inv_sr}' ";
  }elseif($_POST['search_id'] != NULL){
    $post_inv_id = $_POST['search_id'];
    $q = "item_code = '{$post_inv_id}' ";
  }elseif($_POST['search_imei'] != NULL){
    $post_imei = $_POST['search_imei'];
    $q = "imei1 = '{$post_imei}' ";
  }elseif($_POST['search_brand'] != NULL){
    $post_brand = $_POST['search_brand'];
    $q = "brand = '{$post_brand}' ";
  }

  $json = null;

  $search_query   = "SELECT item_code, brand, model_code, imei1, in_value, rack_location, delete_flag ";
  $search_query  .= "FROM inv1 WHERE ";
  $search_query  .= "$q";
  $search_query  .= "ORDER BY delete_flag ASC";

  $search_result = mysqli_query($connection, $search_query);

  while($row = mysqli_fetch_assoc($search_result)){
    $json[] = $row;
  }

  if($json == NULL){
    echo "N";
  }else {
   echo json_encode($json);
  }

Answer 1

你很亲密。这部分：

    "data": {
      str_inv_search
    }

应该是：

    "data": str_inv_search

您将序列化的表单数据嵌套到$_POST['str_inv_search']，这不是必需的。