为什么 ajax 不会填充我的 ul 列表

Why ajax won't populate my ul list?

本文关键字：我的 ul 列表 填充 ajax 为什么      更新时间：2023-09-26

所需要的是ul列表填充来自php代码的数据，在页面加载时。提前感谢，对不起，如果我不准确，我是新来的。这篇文章主要是代码。

这是 ajax 函数的代码： 

$(document).ready(function() {
            var podtip="proba";
            $.ajax({
                url: 'php/dodajTVpocetna.php',
                type: 'POST',
                cache:false,
                data: { target: podtip },
                success: function (data) {
                        $('#slider ul').append(data);
                    }
            }); 
        });

这是 php 文件的代码：

$q = $_POST['target'];
    $conn=mysqli_connect("localhost","root","","iptv");
                        if (mysqli_errno($conn)) {
                            die("Neuspjela konekcija: " . mysqli_connect_error());
                    }
                else{
                    $upitM='SELECT * FROM stream WHERE Kategorija="Music" ORDER BY rand() LIMIT 0,1';
                    $music=mysqli_query($conn,$upitM);
                    $upitF='SELECT * FROM stream WHERE Kategorija="Movies" ORDER BY rand() LIMIT 0,1';
                    $film=mysqli_query($conn,$upitF);
                    $upitS='SELECT * FROM stream WHERE Kategorija="Series" ORDER BY rand() LIMIT 0,1';
                    $series=mysqli_query($conn,$upitS);
                    $upitN='SELECT * FROM stream WHERE Kategorija="News" ORDER BY rand() LIMIT 0,1';
                    $news=mysqli_query($conn,$upitN);
                    $upitMO='SELECT * FROM stream WHERE Kategorija="More" ORDER BY rand() LIMIT 0,1';
                    $more=mysqli_query($conn,$upitMO);

                    if(!$music)echo'greska je "'.mysqli_error($conn).'"';
                    while(($row = mysqli_fetch_assoc($music)) != NULL) {
                            $row1 = mysqli_fetch_assoc($news);
                            $row2 = mysqli_fetch_assoc($film);
                            $row3 = mysqli_fetch_assoc($series);
                            $row4 = mysqli_fetch_assoc($more);
                            print_r(error_get_last());
                            echo"<li><div class='"tv'"><a href='javascript:changeVideoJW('"".$row['Link']."'");'>".$row['Naziv']."</a></div></li>
                                <li><div class='"tv'"><a href='javascript:changeVideoJW('"".$row1['Link']."'");'>".$row1['Naziv']."</a></div></li>
                                <li><div class='"tv'"><a href='javascript:changeVideoJW('"".$row2['Link']."'");'>".$row2['Naziv']."</a></div></li>
                                <li><div class='"tv'"><a href='javascript:changeVideoJW('"".$row3['Link']."'");'>".$row3['Naziv']."</a></div></li>
                                <li><div class='"tv'"><a href='javascript:changeVideoJW('"".$row4['Link']."'");'>".$row4['Naziv']."</a></div></li>";
                            }
            mysqli_close($conn);
                }

网页列表：

<div class="w3-third">
  <div id="liquid1" class="liquid">
    <span class="previous"></span>
    <div class="wrapper">
        <ul id="slider">

        </ul>
    </div>
   <span class="next"></span>
</div>
</div>

我以前使用过ajax，它以这种方式工作。

首先检查你的查询，返回值并正常工作：

print_r($film)和其他查询结果，以查看最后会发生什么。

接下来你不需要使用

$('#slider ul').append(data);

使用这个：

$('#slider').append(data);

用这个更改你的PHP代码： 

$q = $_POST['target'];
    $conn=mysqli_connect("localhost","root","","iptv");
                        if (mysqli_errno($conn)) {
                            die("Neuspjela konekcija: " . mysqli_connect_error());
                    }
                else{
                    $upit='SELECT * FROM stream WHERE Kategorija in ("Music","Movies","Series","News","More") ORDER BY rand()';
                    $all=mysqli_query($conn,$upit);
                    if(!$all)echo'greska je "'.mysqli_error($conn).'"';
                    //uzimamo vrijednosti svih proizvoda za zadati podtip,smjestamo ih u div elemente i prikazujemo na pocetno
                    $ht = "";
                    while(($row = mysqli_fetch_assoc($all)) != NULL) {
                            print_r(error_get_last());
                            $ht .= "<li><div class='"tv'"><a href='javascript:changeVideoJW('"".$row['Link']."'");'>".$row['Naziv']."</a></div></li>";
                            }
            mysqli_close($conn);
            echo $ht;
                }

和你的js代码：

$(document).ready(function() {
            var podtip="proba";
            $.ajax({
                url: 'php/dodajTVpocetna.php',
                type: 'POST',
                cache:false,
                data: { target: podtip },
                success: function (data) {
                        $('#slider').append(data);
                    }
            }); 
        });

您必须通过结果集行累积每次迭代的最终HTML内容。
更改while循环，如下所示：

$content = "";
while(($row = mysqli_fetch_assoc($music)) != NULL) {
                            $row1 = mysqli_fetch_assoc($news);
                            $row2 = mysqli_fetch_assoc($film);
                            $row3 = mysqli_fetch_assoc($series);
                            $row4 = mysqli_fetch_assoc($more);
                            //print_r(error_get_last());
                            $content .= "<li><div class='"tv'"><a href='javascript:changeVideoJW('"".addcslashes($row['Link'],'"')."'");'>".addcslashes($row['Naziv'],'"')."</a></div></li>";
}
echo $content;

将dataType选项添加到 ajax 请求对象中，以HTML从服务器获取响应：

...
dataType : 'html',
...

此外，将响应数据追加为 HTML，如下所示：

...
$('#slider ul').html(data);
...
相关文章：