Question

我有一个新闻自动收录机，它可以正常使用静态html数据但我无法弄清楚如何在指定的html布局中显示动态数据。我无法将json数据解析到列表中。

提前致谢。

getnews.php

<?php
include 'connect.php';
$return = array();
$sql = "SELECT * FROM news";
$result = mysqli_query($db, $sql);
while($details = mysqli_fetch_array($result, MYSQLI_ASSOC)){
    $details_array['date'] = $details['date'];
    $details_array['headline'] = $details['headline'];
    $details_array['content'] = $details['content'];

    array_push($return, $details_array);
}
echo json_encode($return);
?>

的jQuery

<script type="text/javascript">
$(function(){
    $.ajax({
        type:'GET',
        url: 'getnews.php',
        success: function(data){
            var response=JSON.parse(data);
            $(function(){
                $.each(response, function(i, item){
                    $('<ul>').append($('<li>').text(item.heading));
                });
            });
        }
    });
});
</script>

HTML新闻代码

<div id="NewsTicker">
<ul>

<li><div>23rd<br>Sep</div><headline>Expandable Input</headline>
<p><news>Expandable Input is a minimal jQuery plugin to smoothly expand the width of a input filed when focused/clicked and collapse it when lose focus.</news></p>
</li>

<li><div>24th<br>Sep</div><headline>jQuery Photor Plugin</headline>
<p><news>Photor is a fast and easy jQuery plugin to create a responsive & touch-friendly full page image gallery with CSS3 transitions and transforms.</news></p>
</li>

<li><div>25th<br>Sep</div><headline>Metreaux Tables</headline>
<p><news>Metreaux Tables is a jQuery plugin to create nice, clean, themeable, andmodern Windows 8 UI Style data tables with the power of DataTables jQuery javascript library.</news></p>
</li>

</ul>

Answer 1

首先，如果您使用AJAX请求请求JSON，则应将dataType设置为 "json"，这样您就不必手动解析它。即，

$.ajax({
    type: 'GET',
    url: 'getnews.php',
    dataType: 'json',
    success: function(data) {
        ...
    }
});

从jQuery 1.5开始，你应该使用.done()来获得结果 $.ajax()而非传球 success: ...。即，

$.ajax({
    type: 'GET',
    url: 'getnews.php',
    dataType: 'json',
}).done(function(data) {
    ...
});

你非常接近，但你想直接拨打$.each()电话在成功回调中。使用$(function() {...})是捷径 for $(document).ready(function() {...})注册函数页面加载后调用。你应该这样做：

$.ajax({
    type: 'GET',
    url: 'getnews.php',
    dataType: 'json'
}).done(function(data) {
    $.each(data, function(i, item) {
        ...
    });
});

现在，在您的$.each()回调中，您正在创建一个新的<ul>，并且向其中添加了一个子<li>，但没有将其实际添加到页面中。它在我看来，您打算将每个项目附加到<ul>下 <div id="NewsTicker">。要做到这一点，你想做：

var $newsList = $('#NewsTicker > ul');
$.each(data, function(i, item) {
    $('<li>')
        .append($('<div>').html(item.date))
        .append($('<headline>').html(item.headline))
        .append(
          $('<p>').append(
            $('<news>').html(item.content)
          )
        )
        .appendTo($newsList);
});

Answer 2

根据给定代码的理解，我认为您需要在成功处理程序内动态生成与Ticker预期相同的HTML结构。应该是这样的：

 $('<ul>').append("<li><div>"+item.date+"</div><headline>"+item.heading+"</headline><p><news>"+item.content+"</news></p></li>");

注意：您还需要使用＆＃34; item.heading＆＃34;不是＆＃34;标题＆＃34;

无法使用ajax将json数据解析为html列表

2 个答案: