Eri*_*ric 6 ajax jquery facebook facebook-graph-api
我感谢任何和所有的帮助.我是一个初学者,有很少的jQuery/AJAX经验,我一直在疯狂地试图找出为什么我无法解决这个问题.
我正在编写一个具有用户授权权限的Facebook页面应用程序,并将视频上传到该页面.所有这一切都很好,花花公子.这不是Facebook API相关的问题,因为它是一个ajax问题(至少我认为).
基本上,我试图在用户上传视频后以某种方式控制页面.我正在使用[malsup jQuery Form Plugin] [1]将结果页面(在Facebook上显示返回的JSON值的页面)加载到隐藏的iframe中.
我能够启动ajaxStart,并且我通过更改背景颜色或在单击"上传"时打印警报消息来测试它.但是,当上传完成(并且它确实成功完成)时,没有发生任何事情.返回的JSON值在隐藏的iframe中加载,页面位于那里.我试过让ajaxComplete,ajaxStop和ajaxSuccess触发,但是无论出于什么原因它们都没有.
总的来说,这就是我要完成的任务: - 我希望重定向用户或在文件上传完成后显示一些隐藏的内容.我甚至不在乎是否有错误.我只需要有些事情发生. - 我正在使用jQuery表单插件,因为我不是不够先进,无法弄清楚如何使用该值并使用它做一些事情,但如果有人能引导我朝正确的方向发展,那将是值得赞赏的.
最后,这是我的代码:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
// prepare the form when the DOM is ready
$(document).ready(function() {
var options = {
target: '#output2', // target element(s) to be updated with server response
iframeTarget: '#output2',
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
};
// bind form using 'ajaxForm'
$('#theform').ajaxForm(options);
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
return true;
}
// post-submit callback
function showResponse(responseText, statusText, xhr, $form) {
alert(responseText);
}
</script>
<script type="text/javascript">
jQuery().ready(function(){
$('body').ajaxStart(function() {
$(this).css("background-color","red");
});
$('body').ajaxSend(function() {
$(this).css("background-color","blue");
});
$('body').ajaxComplete(function() {
$(this).css("background-color","green");
});
$('body').ajaxStop(function() {
$(this).css("background-color","purple");
});
});
</script>
</head>
<body>
<?php
$app_id = "xxxxxxx";
$app_secret = "xxxxx";
$my_url = "xxxxxx";
$video_title = "xxxxxxxxx";
$video_desc = "xxxxxxxxx";
$page_id = "xxxxxxxx";
$code = $_REQUEST["code"];
if(empty($code)) {
// Get permission from the user to publish to their page.
$dialog_url = "http://www.facebook.com/dialog/oauth?client_id="
. $app_id . "&redirect_uri=" . urlencode($my_url)
. "&display=popup&scope=email,publish_stream,manage_pages";
$current_url = (!empty($_SERVER['HTTPS'])) ? "https://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] : "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
if ($current_url != $dialog_url)
{
echo('<script>window.location ="' . $dialog_url . '";</script>');
}
} else {
// Get access token for the user, so we can GET /me/accounts
$token_url = "https://graph.facebook.com/oauth/access_token?client_id="
. $app_id . "&redirect_uri=" . urlencode($my_url)
. "&client_secret=" . $app_secret
. "&code=" . $code;
$access_token = file_get_contents($token_url);
$accounts_url = "https://graph.facebook.com/me/accounts?" . $access_token;
$response = file_get_contents($accounts_url);
// Parse the return value and get the array of accounts we have
// access to. This is returned in the data[] array.
$resp_obj = json_decode($response,true);
$accounts = $resp_obj['data'];
// Find the access token for the page to which we want to post the video.
foreach($accounts as $account) {
if($account['id'] == $page_id) {
$access_token = $account['access_token'];
break;
}
}
// Using the page access token from above, create the POST action
// that our form will use to upload the video.
$post_url = "https://graph-video.facebook.com/" . $page_id . "/videos?"
. "title=" . $video_title. "&description=" . $video_desc
. "&access_token=". $access_token;
// Create a simple form
echo '<form action=" '.$post_url.' " method="POST" enctype="multipart/form-data" id="theform">';
echo 'Please choose a file:';
echo '<input name="file" type="file">';
echo '<input type="submit" value="Upload" id="button-upload" />';
echo '</form>';
}
?>
<iframe id="output2" name="output2"></iframe>
</body></html>
谢谢您的帮助!!
我尝试过文件上传，由于浏览器具有保护用户文件系统等的所有安全性，因此存在一个复杂的问题。
关于您的问题，我认为您的 AjaxForm jQuery 插件很可能无法正确连接到 Jquery 的全局 Ajax 状态。即使确实如此，我也会说利用全局 Ajax 状态是一个糟糕的设计。如果您向此页面添加任何其他 ajax 请求，那么您的 ajaxComplete、ajaxStop 等函数将开始被调用。
更好的方法是使用 AjaxForm 插件提供的回调。让我们重点关注代码的第一部分。
这有效吗？
success: showResponse // post-submit callback
...
// post-submit callback
function showResponse(responseText, statusText, xhr, $form) {
alert(responseText);
}
如果是这样，你可以替换这个：
$('body').ajaxComplete(function() {
$(this).css("background-color","green");
});
有了这个：
function showResponse(responseText, statusText, xhr, $form) {
$(this).css("background-color","green");
}
我相信使用success:回调是 AjaxForm 插件的预期用途。
| 归档时间： |
|
| 查看次数： |
8557 次 |
| 最近记录： |