這是我用于搜索功能的代碼，它從 fetch_data.php 獲取資料并且可以正常作業。但我想在搜索頁面中添加一個額外的過濾器選項。例如國家或城市。我嘗試了很多方法，但沒有一個奏效。
<script>
$(document).ready(function(){
load_data(1);
function load_data(page, query = '')
{
$.ajax({
url:"fetch_data.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>
這將從 fetch_data.html 獲取資料，因為$_POST['query']
我還想根據來自 HTML 標記的輸入過濾資料。通過手動添加選擇城市，我可以使 fetch_data.html 端作業。但是我如何使用 HTML 標記和 ajax 代碼為/從每個搜索中選擇城市。
我只想從$_POST['city']fetch_data.html 頁面上的 HTML 標記資料中獲取輸入。
我嘗試了以下方法，但沒有成功。對于 tets，我使用了第二個搜索欄位，但$_POST['city']仍然顯示與$_POST['query'].
<script>
$(document).ready(function(){
load_data(1);
function load_data(page, query = '', city = '')
{
$.ajax({
url:"fetch_data.php",
method:"POST",
data:{page:page, query:query, city:city},
success:function(data)
{
$('#dynamic_content').html(data);
}
});
}
$(document).on('click', '.page-link', function(){
var page = $(this).data('page_number');
var query = $('#search_box').val();
var city = $('#city_box').val();
load_data(page, query, city);
});
$('#search_box').keyup(function(){
var query = $('#search_box').val();
load_data(1, query);
});
$('#city_box').keyup(function(){
var city = $('#city_box').val();
load_data(1, city);
});
});
</script>
示例選擇標簽
<select name="city_box" id="city_box">
<option value="newyork">New York</option>
<option value="london">London</option>
<option value="tokyo">Tokyo</option>
<option value="paris">Paris</option>
</select>
uj5u.com熱心網友回復：
這里有幾件事：
- 如果你從服務器請求資料，你真的應該使用 GET 請求，而不是 POST。您可以在請求的查詢字串中添加查詢、城市等。
- 從 city_box 函式呼叫 load_data 時缺少引數。由于查詢和城市都是可選的，因此它將假定您傳遞的“城市”實際上是查詢并將城市作為空字串。為查詢引數手動添加一個空字串應該可以解決這個問題，例如
$('#city_box').keyup(function(){
var city = $('#city_box').val();
load_data(1, '', city);
});
- 在兩個 keyup 函式中獲取當前城市和查詢可能是值得的，這樣無論您沒有更改，都不會為該查詢重置。這也將解決上面 #2 中指出的問題。例如
$('#search_box').keyup(function () {
var query = $('#search_box').val();
var city = $('#city_box').val();
load_data(1, query, city);
});
$('#city_box').keyup(function () {
var query = $('#search_box').val();
var city = $('#city_box').val();
load_data(1, query, city);
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/497880.html