Question

我试图在选择一个选项后使用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代码中，我试图以accordion：

打印过滤数据

<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>';      
}

所以问题是它不起作用。选择选项后，我没有得到任何反应。

Answer 1

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>';
}
}

Answer 2

简单地说，你不应该把你的功能放在$(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);
                },
            });
        }
    });
}

Answer 3

您需要构建和简化代码，以下是您的代码中可以发现的明显错误：

过滤器功能不应该在DOM就绪事件处理程序中：

$(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>

选择选项

3 个答案: