Question

我正在使用JSON显示事件列表。以下是JSON数据：

[{
    "event_id": "1636",
    "event_name": "Nitelounge supported by Mo\u00ebt &amp; Chandon",
    "event_start_date": "2013-05-27",
    "event_start_time": "21:00:00",
    "event_end_time": "05:00:00",
    "post_content": "Le Baron de Paris\r\n<div>Location:\u00a0Tokyo Aoyama, Japan<\/div>\r\n<div itemprop=\"address\" itemscope=\"\" itemtype=\"http:\/\/schema.org\/PostalAddress\">Address:\u00a0\u6771\u4eac\u90fd\u6e2f\u533a\u5357\u9752\u5c713-8-40 \u9752\u5c71\u30bb\u30f3\u30bf\u30fc\u30d3\u30ebB1<\/div>\r\n<div>Access: \u8868\u53c2\u9053\u99c5\u304b\u3089\u5f92\u6b695\u5206\uff0f\u5916\u82d1\u524d\u99c5\u304b\u3089\u5f92\u6b695\u5206<\/div>\r\n<div>URL:\u00a0<a itemprop=\"url\" href=\"http:\/\/www.lebaron.jp\/\" target=\"_blank\">www.lebaron.jp<\/a><\/div>\r\n<div>Phone:\u00a003-3408-3665<\/div>",
    "location_id": "21",
    "location_name": "Le Baron de Paris",
    "location_region": "\u6e2f\u533a",
    "logo": "<img src=\"http:\/\/goodnitetokyo.com\/mobile\/images\/club_logo_lebaron.png\" alt=\"NO IMAGE\" width=\"80\" height=\"60\" \/>"
},

我有一个HTML页面，用于填充DIV中的数据：

<script>
$(document).ready(function() 
{
    $.ajax({
        type: "POST",
        url: "event_list_json.php",
        dataType: "json",
        success: function(data, dataType) 
        {
            var $content = $('#content');
            for (var i =0; i<data.length; i++){
                $content.append("<div id='content'> <div id='space'> </div><div id='logo'>" + data[i].logo + "</div> <div id='info'> <div id='right-top' style='text-overflow:ellipsis; white-space:nowrap; overflow:hidden; vertical-align:top;'><span><h1>[イベント]&nbsp" + data[i].event_name + "</h1></span></div> <div id='right-middle'><span><h2>&nbsp"+ data[i].event_start_date + "&nbsp&#8226;&nbsp"+ data[i].event_start_time + "&nbsp-&nbsp" + data[i].event_end_time + "</h2></span></div> <div id='right-bottom' style='vertical-align:top;'><span><h3>&nbsp" + data[i].location_region + "&nbsp&#8226;&nbsp" + data[i].location_name + "</h3></span></div></div> <div id='button'><a href='#' onclick='btn_click(" + i + ")' ><img src='http://goodnitetokyo.com/mobile/images/panel_selected_open_arrow.png' width='23' height='60' /></div></div><hr style='height:2px; visibility:hidden; margin-bottom:-1px;' />");
            }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) 
        {
            alert('Error : ' + errorThrown);
        }
    });
});
</script>

<body>
<div id="content"></div>
</body>

所以，我想要做的是如果用户点击'按钮'，那么另一个DIV可以从JSON数据加载'post_content'。

尝试加载到此DIV：

<div id='panel_wrapper'> 
<div id='panel_button'><img src='images/panel_selected_close_arrow.png' width='23' height='60' /></div>
<div id='panel_content'>  
<div id='panel_logo'><img src='images/club_logo_default.png' width='80' height='60' />            </div>
<div id='panel_info'> 
    <div id='panel_right-top'>TOP</div>
    <div id='panel_right-middle'>MIDDLE</div>
    <div id='panel_right-bottom'>BOTTOM</div>
    <div id='panel_right-post'>POST</div>
</div>

来自JSON的

“post_content”加载到+ data [i] .post_content +“

我该如何正确地做到这一点？我似乎无法弄明白。

谢谢你的帖子。仍然迷失在这里。

Answer 1

event_list_json.php应该从您的JSON数组中回显出一条特定记录。然后在$(button).click处理程序以及$(document).ready处理程序中对它进行ajax调用。进行ajax调用时，需要指定要接收的记录的索引。

此外，GET请求比POST更合适，因为在您发出这些请求时，您没有在服务器端修改任何内容;你正在获取数据。

另一件需要考虑的事情是，如果在ajax请求之间将新事件插入JSON数组，该怎么办。我会使用websocket向客户端发送一个事件，但在解决当前问题之前不要担心。

Answer 2

您需要为您的应用设计更清晰的流程。实际上，页面在文档准备就绪时发出单个jQuery POST请求，并且在该请求成功时，为JSON数据中的每个顶级元素添加div，所有这些都具有相同的{{1} }。

首先，将页面要执行的任务分离为多个功能。至少，您应该有一个独特的id和renderData函数，可以从代码中的不同位置调用。 名称就是例子。无论命名约定对你有意义都是合适的。

一旦您将逻辑放在不同的命名函数中，而不是作为匿名事件处理程序，您可以将适当的代码附加到按钮的getData事件，以请求/显示更多数据。

阅读jQuery's ON method，不要害怕提出澄清问题。

通过AJAX到DIV的JSON数据

2 个答案: