通過Ajax調用傳回圖像
[英]Passing image back with Ajax call
問題描述
我正在嘗試將圖像與其余的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呼叫和日期范圍選擇器文件
$(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 個解決方案
解決方案1
0 2017-06-30 17:37:17
我必須將此添加到AJAX調用文件中。 在.done（function（data）{}區域中。
$('#35').html('<img src="' + data.message35 + '" />'); // log data to the console so we can see
從ajax調用將參數傳遞到rails后端
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.