[英]Filter data with ajax after select option
我試圖在選擇選項后使用ajax過濾數據。 這是html代碼：
<select name="filter" onchange="filter(this.value)">
<option disabled selected>Sort By</option>
<option value="all">All Artists</option>
<option value="new">Free Artists</option>
</select>
在jQuery代碼中，我試圖按手風琴打印過濾的數據：
<link rel="stylesheet" type="text/css" href="jquery-ui/jquery-ui.css"/>
<script type="text/javascript" src="jquery-ui/jquery.js"></script>
<script type="text/javascript" src="jquery-ui/jquery-ui.js"></script>
$(document).ready(function(){
function filter(item)
{
$.ajax({
type: "POST",
url: "filter2.php",
data: { value: item},
success:function(data){
document.getElementById('getData').style.display = "block";
document.getElementById("getData").innerHTML = response;
$('#hideData').hide();
$("#myAccordion").accordion({heightStyle:"content", collapsible:true});
$("#myAccordion li ").draggable({
appendTo: "body",
helper: "clone",
refreshPositions: true,
start: function (event, ui) {
sourceElement = $(this);
},
});
}
});
}
});
還有filter2.php ，我嘗試在其中打印名稱：
require_once('inc/database_connection.php');
include 'model/model.project.php';
include 'model/model.filter.php';
$fieldname = $_POST['value'];
if($fieldname=="all")
{
$result1 = getAll();
while($row1=mysqli_fetch_array($result1))
{
$name = $row1['username'];
echo '<div id="getData">';
echo '<ul class="source">';
echo "<li class='item'><span class='closer'>x</span>".$name."</li>";
}
echo '</ul>';
echo '</div>';
}
else if($fieldname=="new")
{
$result2 = getFree();
while($row2=mysqli_fetch_array($result2))
{
$name = $row2['username'];
$color = $row2['color'];
echo '<div id="getData">';
echo '<ul class="source">';
if($color=0)
{
echo "<li class='item'><span class='closer'>x</span>".$name."</li>";
}
}
echo '</ul>';
echo '</div>';
}
所以問題是它不起作用。 選擇選項后，我沒有任何反應。
jQuery提供了一個.load函數，可用於加載div。 因此，我正在使用同一功能，以獲取有關此功能的更多信息，請參考此鏈接http://api.jquery.com/load/在這里，我認為這可能對您有所幫助的解決方案，這是HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<select name="filter" onchange="filter(this.value)">
<option disabled selected>Sort By</option>
<option value="all">All Artists</option>
<option value="new">Free Artists</option>
</select>
<div id="div1"></div>
</body>
</html>
<script>
function filter(item) {
$("#div1").load("filter.php", {value: item});
}
</script>
現在這是PHP代碼
require_once('inc/database_connection.php');
include 'model/model.project.php';
include 'model/model.filter.php';
$fieldname = $_REQUEST['value'];
if (isset($fieldname)) {
if ($fieldname == "all") {
$result1 = getAll();
while($row1=mysqli_fetch_array($result1))
{
$name = $row1['username'];
echo '<div id="getData">';
echo '<ul class="source">';
echo "<li class='item'><span class='closer'>x</span>".$name."</li>";
}
echo '</ul>';
echo '</div>';
} else if ($fieldname == "new") {
$result2 = getFree();
while($row2=mysqli_fetch_array($result2))
{
$name = $row2['username'];
$color = $row2['color'];
echo '<div id="getData">';
echo '<ul class="source">';
if($color=0)
{
echo "<li class='item'><span class='closer'>x</span>".$name."</li>";
}
}
echo '</ul>';
echo '</div>';
}
}
簡而言之，您不應該將函數放在$(document).ready(function(){ }); 因此，將其刪除后，最終的JavaScript代碼將會是如果仍然有任何問題，請通知我
function filter(item) {
$.ajax({
type: "POST",
url: "filter2.php",
data: {value: item},
success: function(data) {
alert(data);
document.getElementById('getData').style.display = "block";
document.getElementById("getData").innerHTML = response;
$('#hideData').hide();
$("#myAccordion").accordion({
heightStyle: "content",
collapsible: true
});
$("#myAccordion li ").draggable({
appendTo: "body",
helper: "clone",
refreshPositions: true,
start: function(event, ui) {
sourceElement = $(this);
},
});
}
});
}
您需要結構化和簡化代碼，這是可以從您的代碼中發現的明顯錯誤：
filter函數不應位於DOM ready事件處理程序中：
$(document).ready(function(){
function filter(item)
{ ...
也，
while($row1=mysqli_fetch_array($result1)){
$name = $row1['username'];
echo '<div id="getData">';
echo '<ul class="source">';
echo "<li class='item'><span class='closer'>x</span>".$name."</li>";
}
您正在回聲多次（對於每一行），在此僅應執行一次。
同樣這不是測試，0會影響$ color而不是針對：
if($color=0) // should be ($color == 0)
現在，為了簡化您要實現的目標，讓我們重新創建filter2.php：
function getAll() // this is just to mimic your 'all' data
{
return array(
array('username' => 'User 1', 'color' => 'red'),
array('username' => 'User 2', 'color' => 0),
array('username' => 'User 3', 'color' => 'red'),
array('username' => 'User 4', 'color' => 0),
array('username' => 'User 5', 'color' => 'red'));
}
function getFree() // this is just to mimic your 'free' data source
{
return array(
array('username' => 'User 2', 'color' => 0),
array('username' => 'User 4', 'color' => 0));
}
$results = array();
$fieldname = $_POST['value'];
if ($fieldname == "all") // at a first stage you only need to check which data to use/fetch from the database
$results = getAll();
elseif ($fieldname == "new")
$results = getFree();
// now you have the data, you have to output the desired html for the accordion, I followed the regular jQuery layout so you can test it
while($result=array_pop($results)) { // change array_pop back to mysqli_fetch_array($results)
echo "<h3>$result[username]</h3>
<div>
<p>
$result[username]
</p>
</div>";
}
前端看起來像：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Accordion - Test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#myAccordion" ).accordion();
} );
</script>
</head>
<body>
<select name="filter" onchange="filter(this.value)">
<option disabled selected>Sort By</option>
<option value="all">All Artists</option>
<option value="new">Free Artists</option>
</select>
<div id="myAccordion"></div>
<script>
function filter(item)
{
$.ajax({
type: "POST",
url: "filter2.php",
data: { value: item},
success:function(data){
$('#myAccordion').html(data).accordion( "refresh" );
}
});
}
</script>
</body>
</html>
基於多個 Select 選項和 ajax jquery ZE1BFD762321E409CEE4AC0B6E
[英]Filter Data based on Multiple Select option with ajax jquery php
jquery 在 select 選項上的搜索過濾器后顯示未定義的數據
[英]jquery showing undefined data after search filter on select option
Export to Excel Pdf is not working in Datatable after select option filter in php ajax
[英]Export to Excel Pdf is not working in Datatable after select option filter in php ajax
使用對象選擇選項通過Ajax請求加載數據時選擇選項的問題
[英]Problems with selecting option with loading data with Ajax request with the object select option
ajax請求后如何在html輸入中自動選擇“選擇”選項？
[英]How to auto select "select" option in html input after ajax request?
在jsp中的jQuery即時過濾器單擊后單擊html選擇不更改選項
[英]Html select not changes option on click after jquery instant filter in jsp
jQuery：排序后保留默認選擇 <option>在<select>過濾
[英]jQuery: retain default selection after sorting <option>s in <select> filter
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.