Question

我的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”加载最后两个事件

Answer 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);
        }
    });
});

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

1 个答案: