Php JSON数据通过AJAX传输到DIV_Php_Mysql_Ajax_Json

Php JSON数据通过AJAX传输到DIV

php mysql ajax json

Php JSON数据通过AJAX传输到DIV,php,mysql,ajax,json,Php,Mysql,Ajax,Json,我正在使用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_conte

我正在使用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\" \/>"
},

[{
“事件id”：“1636”，
“事件名称”：“Mo\u00ebt&；Chandon支持的Nitelounge”，
“活动开始日期”：“2013-05-27”，
“事件开始时间”：“21:00:00”，
“事件结束时间”：“05:00:00”，
“发布内容”："法国巴黎男男男男男男男爵的巴黎\r\n位置：\r\n位置：\U00A00东京日本Aya山，日本的东京\r\n地址：\r\r\r\n地址：\r\r\r\r\r\n位置：\0\r\n地点：\0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0东京东京东京东京东京日本日本日本的东京AYaYa山，日本\r\r\r\r\r\r\r\r\r\r\r\r\r\n服装：\n地址：\r\r\r\r\r\r\r\r\r\r\r\n地址：\r\r\r\r\r\r\r\r\r\r\n地址：\r\r\r\r\r\r\r\r\r\r\r\r\r\r\r\n服装：\r\r\r\r\r\n服装6\r\nURL:\u00a0www.lebaron.jp\r\n电话：\u00a003-3408-3665",
“位置id”：“21”，
“地点名称”：“巴黎男爵酒店”，
“位置\区域”：“\u6e2f\u533a”，
“徽标”：”
},

我有一个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>


$（文档）.ready（函数（）
{
$.ajax({
类型：“POST”，
url:“事件列表json.php”，
数据类型：“json”，
成功：函数（数据、数据类型）
{
var$content=$（“#content”）；
对于（var i=0；ievent\u list\u json.php
应该从json数组中回显一条特定记录。然后从$（按钮）中对其进行ajax调用。单击处理程序以及$（文档）.ready
handler。进行ajax调用时，需要指定要接收的记录的索引
另外，GET
请求比POST
更合适，因为在发出这些请求时，您没有修改服务器端的任何内容；您正在获取数据
另一个要考虑的问题是，如果在Ajax请求之间插入JSON数组中的新事件，该怎么办？我将使用WebSoCK向客户端发送事件，但在您解决当前问题之前不要担心。
 < P>您需要为应用程序设计更清晰的流程。T在文档准备就绪时请求，并且在请求成功后，为JSON数据中的每个顶级元素添加一个div
，所有元素都具有相同的id

首先，将页面需要执行的任务分成多个函数。至少，您应该有一个不同的renderData
和getData
函数，可以从代码中的不同位置调用这些函数。名称是示例。任何对您有意义的命名约定都是合适的
一旦您的逻辑位于不同的命名函数中，而不是作为匿名事件处理程序，您就可以将适当的代码附加到按钮的单击
事件以请求/显示更多数据
请继续阅读，不要害怕提出澄清性问题。
似乎是正确的路径。我已经更新了我的问题。请看一看，好吗？在$content.append
中，您不应该在包含所有事件的div\content
中插入新的div\content。生成的c中不应该有任何IDode，除非它们有一个像事件号这样的唯一字符串。生成代码中几乎所有的ID实际上都应该是类。ID在整个页面上必须是唯一的。
<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>