2

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

[{
    "event_id": "1636",
    "event_name": "Nitelounge supported by Mo\u00ebt & 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\" \/>"
},

我有一个在 DIV 中填充数据的 HTML 页面：

<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 +“

我将如何正确地做到这一点？我似乎无法弄清楚。

谢谢你们的帖子。还是迷失在这里。

4

2 回答 2

0

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

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

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

于 2013-05-28T00:39:35.520 回答
0

您需要为您的应用程序设计更清晰的流程。实际上，当文档准备好时，页面会发出一个 jQuery POST 请求，并且在该请求成功后，会div为 JSON 数据中的每个顶级元素添加一个，所有元素都具有相同的id.

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

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

阅读jQuery 的 ON 方法，不要害怕提出明确的问题。

于 2013-05-28T00:40:11.273 回答