我想从数据库加载事件日历，返回值失效且日期不显示

Posted 2023-05-09

【中文标题】我想从数据库加载事件日历，返回值失效且日期不显示

【英文标题】：I want to load event calendar from Database, The return value lose effect and date does not show

【发布时间】：2017-03-03 03:42:13

【问题描述】：

我的javascript：

////////////////////////////// Events Loading  ///////////////
 $('body').on('click', '#eventbnt', function(e)

    e.preventDefault();
    //var container = $('#loadmorefollowers');
   // $(container).html('<img src="img/loader.gif">');
    var newhtml = '';
    //alert("yes")
    $.ajax(
      url: urllink,
      type: 'post',
      data: 'action': "events",
      cache: false,
      success: function(json) 
          alert(json)
        newhtml =json;
        $('#ei-events').append(newhtml);
      ,
      error: function(xhr, desc, err) 
        console.log(xhr + "\n" + err);
      
    ); // end ajax call
  );

HTML：

<div id="ei-events">
            <div class="ei-event" data-start="2016-12-28 16:30" data-end="2014-12-28 19:20" data-loc="Madrid">
                <div class="ei-name">Lorem ipsum dolor</div>
                <div class="ei-description">Lorem ipsum dolor sit amet, consect ratatattatttt dadaddd haha</div>
            </div>
            <div class="ei-event" data-start="2016-09-29 16:30" data-end="2014-12-24 16:30" data-loc="London">
                <div class="ei-name">Lorem ipsum dolor</div>
                <div class="ei-description">Lorem ipsum dolor sit amet, consectetur adipiscing haha.</div>
            </div>
            <div class="ei-event" data-start="2016-10-1 22:30" data-end="2014-12-29 16:30" data-loc="Berlin">
                <div class="ei-name">Lorem ipsum dolor</div>
                <div class="ei-description">Lorem ipsum dolor sit amet, consectetur adipiscing.</div>
            </div>
            <div class="ei-event" data-start="2016-10-21 22:30" data-end="2014-12-29 16:30" data-loc="Berlin">
                <div class="ei-name">Lorem ipsum dolor</div>
                <div class="ei-description">Lorem ipsum dolor sit amet, consectetur adipiscing.</div>
            </div>
        </div>
       <a href="#" id="eventbnt"> Load More</a>

我的 php：

$start = "2016-10-29 17:30";
$end = "2016-10-30 08:30";

if($action == "events")
echo json_encode('<div class="ei-event" data-start="'.$start.'" data-end="'.$end.'" data-loc="London">
                <div class="ei-name">Club opening</div>
                <div class="ei-description">Lorem ipsum dolor sit amet, consectetur adipiscing.</div>
            </div>
            <div class="ei-event" data-start="2016-10-22 17:30" data-end="2016-10-24 08:30" data-loc="Paris">
                <div class="ei-name">IT conf</div>
                <div class="ei-description">Lorem ipsum dolor sit amet, consectetur adipiscing.</div>
            </div>');

事件在html页面中一起加载时显示良好；但是如果我通过JavaScript从PHP调用它，它不会显示日历效果并且日期不会显示。 HTML 上的 2 个事件显示良好，但是当我单击“eventbnt”加载 PHP 时。效果不起作用，日期不会同时显示变量中的一个。

请问，可能是什么问题；是javascript不解释变量$startdate还是PHP？

请参阅附件，第一个两个事件默认使用 HTML 加载，而最后两个事件在我单击“加载更多”时使用“eventbnt”加载

【问题讨论】：

您是否在控制台上遇到任何错误？

可能只是因为代码是废话。请阅读json_encode()的手册

【参考方案1】：

修改 PHP 以返回类似这样的合理 json 数据结构

if($action == "events")
    $htm = '<div class="ei-event" data-start="'.$start.'" data-end="'.$end.'" data-loc="London">
                <div class="ei-name">Club opening</div>
                <div class="ei-description">Lorem ipsum dolor sit amet, consectetur adipiscing.</div>
            </div>
            <div class="ei-event" data-start="2016-10-22 17:30" data-end="2016-10-24 08:30" data-loc="Paris">
                <div class="ei-name">IT conf</div>
                <div class="ei-description">Lorem ipsum dolor sit amet, consectetur adipiscing.</div>
            </div>';
    echo json_encode(array('htm'=>$htm);

然后修改javascript

$('body').on('click', '#eventbnt', function(e)
    e.preventDefault();
    $.ajax(
        url: urllink,
        type: 'post',
        data: 'action': "events",
        cache: false,
        dateType: 'json',
        success: function(json) 
            alert(json.htm)
            $('#ei-events').append(json.htm);
        ,
        error: function(xhr, desc, err) 
            console.log(xhr + "\n" + err);
        
    );
);