Question

我感谢任何帮助。我是一个初学者，有很少的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>

感谢您的帮助!!

Answer 1

它接缝你得到一个Ajax错误。我没有在您的代码中看到任何错误处理程序。您可以尝试添加错误处理程序，如下所示

<script>
    $(document).ready(function(){ 
        $(document).ajaxError(function(e, jqxhr, settings, exception) {
            alert(exception);
        })
    })
</script>

Answer 2

我玩过文件上传，并且有一个复杂的野兽，因为浏览器具有保护用户文件系统的所有安全性等等。

关于你的问题，我认为你的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插件的预期用途。

Answer 3

jquery ajaxSend或ajaxStart会抛出某种错误，文档不会执行ajaxComplete。我试图修复这个bug已经有一段时间了，只能找到一个解决方法：

function hideAjaxIndicator() {
    $('#ajax-indicator').hide();
}
$(document).ready(function () {
    setTimeout(hideAjaxIndicator, 1000);
});

您可以将其添加到.js文件中。

ajaxComplete / ajaxStop / ajaxSuccess未触发

3 个答案: