使用PHP AJAX多个值实时搜索

Question

我要使用ajax将主题值传递给页面fetch.php。这样，我可以在fetch.php使用$ subj = $ subj = $ sport ['objects'];

代码 中获得主题名称是

<div class="card-header">Search Question</div>
        <div class="card-body">
          <div class="form-group">
            <input type="text" name="subject" id="subj" class="form-control"  value="Physics" />
            <input type="text" name="search_box" id="search_box" class="form-control" placeholder="Type your search query here" />
          </div>
          <div class="table-responsive" id="dynamic_content">
            
          </div>
        </div>
      </div>

<script>
  $(document).ready(function(){

    load_data(1);

    function load_data(page, query = '')
    {
      $.ajax({
        url:"fetch.php",
        method:"POST",
        data:{page:page, query:query},
        success:function(data)
        {
          $('#dynamic_content').html(data);
        }
      });
    }

    $(document).on('click', '.page-link', function(){
      var page = $(this).data('page_number');
      var query = $('#search_box').val();
      load_data(page, query);
    });

    $('#search_box').keyup(function(){
      var query = $('#search_box').val();
      load_data(1, query);
    });

  });
</script>

Answer 1

如果您查看如何处理查询，则可以推断如何以类似的方式传递其他值（例如主题）。

我首先要重新分配代码，尤其是事件处理程序：

$(document).on("click", ".page-link", function () {
  loadDataByPageNumber($(this).data("page_number"));
});

$("#search_box").keyup(function () {
  loadDataByPageNumber(1);
});

function loadDataByPageNumber(page) {
  var query = $("#search_box").val();
  var subject = $("#subj").val();
  load_data(page, subject, query);
}

然后可以修改load_data函数以接受object> objection参数：

function load_data(page, subject, query = "") {
  $.ajax({
    url: "fetch.php",
    method: "POST",
    data: { page: page, query: query, subject: subject },
    success: function (data) {
      $("#dynamic_content").html(data);
    },
  });
}