使用Ajax调用传回图像

时间:2017-06-30 17:05:08

标签: javascript php jquery ajax facebook-php-sdk

我试图用我的ajax调用的其余部分传回一个图像。我目前正在使用Facebook Marketing API,我正在使用foreach()来浏览数组。除了图像,一切都很好。当我尝试解决它时,我得到它来显示image_url,但是,我想要实际的图像。 home.php有三个文件显示数据(DUH)。 fbdata.php是发送日期范围数据的位置以及API代码所在的位置。最后第三个文件是fbdwdrp.php,这是我有日期范围选择器和ajax调用的地方。我需要做的就是弄清楚如何显示实际图像而不是image_url。

<?php

        require_once __DIR__ . '/vendor/autoload.php';
        use FacebookAds\Api;
        use FacebookAds\Object\AdUser;
        use Facebook\Facebook;
        use Facebook\Exceptions\FacebookResponseException;
        use Facebook\Exceptions\FacebookSDKException;
        use FacebookAds\Object\Campaign;
        use FacebookAds\Object\Fields\AdsInsightsFields;
        use FacebookAds\Object\Ad;
        use FacebookAds\Object\Fields\AdSetFields;
        use FacebookAds\Object\AdCampaign;
        use FacebookAds\Object\Fields\AdFields;
        use FacebookAds\Object\Fields;
        use FacebookAds\Object\Fields\AdImageFields;
        use FacebookAds\Object\AdAccount;
        use FacebookAds\Object\AdSet;
        use FacebookAds\Object\AdCreative;
        use FacebookAds\Object\Fields\AdCreativeFields;
        use FacebookAds\Object\Fields\AdCreativePhotoDataFields;
        use FacebookAds\Object\AdCreativeLinkData;
        use FacebookAds\Object\Fields\AdCreativeLinkDataFields;
        use FacebookAds\Object\Fields\CampaignFields;
        use FacebookAds\Object\Page;
        use FacebookAds\Object\Fields\AdPreviewFields;
        use FacebookAds\Object\Values\AdPreviewAdFormatValues;
        use FacebookAds\Object\AdVideo;
        ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="background: url(img/main_BG.jpg) no-repeat center center fixed; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;">

  <head>

    <title>Facebook Insights </title>
        <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/imgslidefb.css">   
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />      
    <link rel="stylesheet" type="text/css" href="css/daterangepicker.css" />
    <!--[if lt IE 9]>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/bootstrap-datepaginator.js"></script>        
    <script type="text/javascript" src="js/jquery.js"></script>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <!-- Include Date Range Picker -->
    <script type="text/javascript" src="js/daterangepicker.js"></script>
    <script type="text/javascript" src="js/fbdwdrp.js"></script>
    <!-- Include the DateRangeSelector component script. -->
  </head>
<body>
                <div id="demo" style="font: white; float: left; font-family: 'Russo One', sans-serif, black; width: 300px; height:65px; background:Grey;">
                    <h4 style="font-family: 'Russo One', sans-serif, white; left: 62em; top: 11em;">Select Dates</h4>
                    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                    <input type="text" id="config-demo"  style="color: black; background-image: #808080; text-align: center; font-family: 'Russo One', sans-serif, black; width: 210px; height:22px;">

                </div></br></br><br/>   
                <?php
                        // Init PHP Sessions
        session_start();

        $fb = new Facebook([
          'app_id' => 'xxxxxxxxx',
          'app_secret' => 'xxxxxxxx',
        ]);

        $helper = $fb->getRedirectLoginHelper();

        if (!isset($_SESSION['xxxxxxx'])) {
          $_SESSION['xxxxxxx'] = null;
        }

        if (!$_SESSION['xxxxxxx']) {
          $helper = $fb->getRedirectLoginHelper();
          try {
            $_SESSION['xxxxxxxxx'] = (string) $helper->getAccessToken();
          } catch(FacebookResponseException $e) {
            // When Graph returns an error
            echo 'Graph returned an error: ' . $e->getMessage();
            exit;
          } catch(FacebookSDKException $e) {
            // When validation fails or other local issues
            echo 'Facebook SDK returned an error: ' . $e->getMessage();
            exit;
          }
        }

        if ($_SESSION['xxxxxxxxxx']) {
          //echo "You are logged in!";

        // Initialize a new Session and instantiate an API object
        Api::init(
          'xxxxxxxxxx', // App ID
          'xxxxxxxxxx', //app_secret
          $_SESSION['xxxxxxxx'] // Your user access token
        );

    ?>
    <h1 style="text-align: center;">Facebook Ads plus past two months.</h1>
            <table class="fbtable">
            <tr class="fbrow">
                <th class="fbheader">Campaign ID</th>
                <th class="fbheader">Campaign Name</th>
                <th class="fbheader">Impressions</th>
                <th class="fbheader">Clicks</th>
                <th class="fbheader">Reach</th>
                <th class="fbheader">Spend</th>
                <th class="fbheader">Total Actions</th>
                <th class="fbheader">CPM</th>
                <th class="fbheader">CPC</th>
                <th class="fbheader">Start Date</th>
                <th class="fbheader">End Date</th>
            </tr>
            <tr class="fbrow">
                <td id="1"></td>
                <td id="2"></td>
                <td id="3"></td>
                <td id="4"></td>
                <td id="5"></td>
                <td id="6"></td>
                <td id="7"></td>
                <td id="8"></td>
                <td id="9"></td>
                <td id="10"></td>
                <td id="11"></td>
            </tr>
            <tr class="fbrow">
                <td id="12"></td>
                <td id="13"></td>
                <td id="14"></td>
                <td id="15"></td>
                <td id="16"></td>
                <td id="17"></td>
                <td id="18"></td>
                <td id="19"></td>
                <td id="20"></td>
                <td id="21"></td>
                <td id="22"></td>
            </tr>
            <tr class="fbrow">
                <td id="23"></td>
                <td id="24"></td>
                <td id="25"></td>
                <td id="26"></td>
                <td id="27"></td>
                <td id="28"></td>
                <td id="29"></td>
                <td id="30"></td>
                <td id="31"></td>
                <td id="32"></td>
                <td id="33"></td>
            </tr>
            <tr class="fbrow">
                <td id="34"></td>
                <td id="35"></td>
                <td id="36"></td>
            </tr>
 </table>
 <?php
                }else {
          $permissions = ['ads_management'];
          $loginUrl = $helper->getLoginUrl('http://www.somewebsite.com', $permissions);
          echo '<a href="' . $loginUrl . '">Log in with Facebook</a>';
        } 
        ?>
</body>
</html>

营销API代码

<?php

if((!empty($_POST['startDate'])&&(!empty($_POST['endDate'])))) {    // Check whether the date is empty  



    //setup variables for start and end date..
    $startDate = date('Y-m-d', strtotime($_POST['startDate']));
    $endDate = date('Y-m-d', strtotime($_POST['endDate']));

    $account = new AdAccount('act_XXXXXXXXX');

        $params = array(
          'time_range' => array(
            'since' => (new \DateTime($startDate))->format('Y-m-d'),
            'until' => (new \DateTime($endDate))->format('Y-m-d'),
          ),
            'thumbnail_width' => 200,
            'thumbnail_height' => 150,
            'level' => 'campaign',
            'limit' => '15'

        );

        $params1 = array(
          'time_range' => array(
            'since' => (new \DateTime("$startDate -1 month"))->format('Y-m-d'),
            'until' => (new \DateTime("$endDate -1 month"))->format('Y-m-d'),
          ),
            'thumbnail_width' => 200,
            'thumbnail_height' => 150,
            'level' => 'campaign',
            'limit' => '15'

        );

        $params2 = array(
          'time_range' => array(
            'since' => (new \DateTime("$startDate -2 month"))->format('Y-m-d'),
            'until' => (new \DateTime("$endDate -2 month"))->format('Y-m-d'),
          ),
            'thumbnail_width' => 200,
            'thumbnail_height' => 150,
            'level' => 'campaign',
            'limit' => '15'

        );

$fields = array(
  AdsInsightsFields::CAMPAIGN_NAME,
  AdsInsightsFields::CAMPAIGN_ID,
  AdsInsightsFields::IMPRESSIONS,
  AdsInsightsFields::CLICKS,
  AdsInsightsFields::REACH,
  AdsInsightsFields::SPEND,
  AdsInsightsFields::CPM,
  AdsInsightsFields::CPC,
  AdsInsightsFields::ACTIONS, 
  AdsInsightsFields::DATE_START,
  AdsInsightsFields::DATE_STOP,
);

$field = array(
  AdCreativeFields::TITLE,
  AdCreativeFields::THUMBNAIL_URL,
  AdCreativeFields::IMAGE_URL,
  AdCreativeFields::BODY,
  );    

$adcreatives = $account->getAdCreatives($field, $params);

$insights = $account->getInsights($fields, $params);
$insights1 = $account->getInsights($fields, $params1);
$insights2 = $account->getInsights($fields, $params2);
 foreach($insights as $i) {

    $impress = number_format((float)$i->impressions);
    $reach = number_format((float)$i->reach);
    $totalAction = number_format((float)$i->actions);
    $cpc = number_format($i->cpc, 2, '.', '');
    $cpm = number_format($i->cpm, 2, '.', '');

    $return['message1'] = $i->campaign_id;
    $return['message2'] = $i->campaign_name;
    $return['message3'] = $impress;
    $return['message4'] = $i->clicks;
    $return['message5'] = $reach;
    $return['message6'] = $i->spend;
    $return['message7'] = $totalAction;
    $return['message8'] = $cpm;
    $return['message9'] = $cpc;
    $return['message10'] = $i->date_start;
    $return['message11'] = $i->date_stop;


}

 foreach($insights1 as $i1) {

    $impress = number_format((float)$i1->impressions);
    $reach = number_format((float)$i1->reach);
    $totalAction = number_format((float)$i1->actions);
    $cpc = number_format($i1->cpc, 2, '.', '');
    $cpm = number_format($i1->cpm, 2, '.', '');

    $return['message12'] = $i1->campaign_id;
    $return['message13'] = $i1->campaign_name;
    $return['message14'] = $impress;
    $return['message15'] = $i1->clicks;
    $return['message16'] = $reach;
    $return['message17'] = $i1->spend;
    $return['message18'] = $totalAction;
    $return['message19'] = $cpm;
    $return['message20'] = $cpc;
    $return['message21'] = $i1->date_start;
    $return['message22'] = $i1->date_stop;

}

 foreach($insights2 as $i2) {

    $impress = number_format((float)$i2->impressions);
    $reach = number_format((float)$i2->reach);
    $totalAction = number_format((float)$i2->actions);
    $cpc = number_format($i2->cpc, 2, '.', '');
    $cpm = number_format($i2->cpm, 2, '.', '');

    $return['message23'] = $i2->campaign_id;
    $return['message24'] = $i2->campaign_name;
    $return['message25'] = $impress;
    $return['message26'] = $i2->clicks;
    $return['message27'] = $reach;
    $return['message28'] = $i2->spend;
    $return['message29'] = $totalAction;
    $return['message30'] = $cpm;
    $return['message31'] = $cpc;
    $return['message32'] = $i2->date_start;
    $return['message33'] = $i2->date_stop;

}

foreach($adcreatives as $imgs){

     $return['message34'] = $imgs->title;
     $return['message35'] = $imgs->image_url;
     $return['message36'] = $imgs->body;

}

            header('Content-Type: text/json');              
            echo json_encode($return); //echo response back to Home page... 
}
}
?>

AJAX CALL和DATE RANGE PICKER FILE

    $(document).ready(function() {
            $('#config-demo').click(function() {
              $(this).parent().find('#demo').click();
            });
            updateConfig();

            function updateConfig() {

                    var start = moment().subtract(2, 'month');
                    var end = moment();

              var options = {

                   "showDropdowns": true,
              };
              options.opens = "center";

            options.ranges = {
                  'Today': [moment(), moment()],
                  'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                  'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                  'Last 14 Days': [moment().subtract(13, 'days'), moment()],
                  'Last 28 Days': [moment().subtract(27, 'days'), moment()],
                  'This Month': [moment().startOf('month'), moment().endOf('month')],
                  'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            };

              $('#config-demo').daterangepicker(options, function(start, end, label) { 
                    var startDate = start.format('YYYY-MM-DD'); 
                    var endDate = end.format('YYYY-MM-DD');
                    passDate(startDate, endDate);

               });
            }
    });

    function passDate(startDate,endDate) {
        $('.loader').show();
        $.ajax({
                method: 'POST', // define the type of HTTP verb we want to use
                url: 'fbdata.php', // the url where we want to POST
                dataType: 'json', // Our data object
                data: {startDate: startDate, endDate: endDate}, // Ensure we pass the start and end dates to $_POST in PHP
            })

            // using the done promise callback
            .done(function(data) {
                console.log(data);
                $('.loader').hide();
                alert("OOOOO");
                $('#1').text(data.message1); // log data to the console so we can see
                $('#2').text(data.message2); // log data to the console so we can see
                $('#3').text(data.message3); // log data to the console so we can see
                $('#4').text(data.message4); // log data to the console so we can see
                $('#5').text(data.message5); // log data to the console so we can see
                $('#6').text(data.message6); // log data to the console so we can see
                $('#7').text(data.message7); // log data to the console so we can see
                $('#8').text(data.message8); // log data to the console so we can see
                $('#9').text(data.message9); // log data to the console so we can see
                $('#10').text(data.message10); // log data to the console so we can see
                $('#11').text(data.message11); // log data to the console so we can see
                $('#34').text(data.message34); // log data to the console so we can see
                $('#35').append('<img src="data:image/png;base64,' + data.message35 + '" />'); // log data to the console so we can see
                $('#36').text(data.message36); // log data to the console so we can see

1 个答案:

答案 0 :(得分:0)

我必须在AJAX调用文件中添加它。在.done(function(data){}区域。

$('#35').html('<img src="' + data.message35 + '" />'); // log data to the console so we can see