在显示加载图片的同时使用AJAX调用另一个页面

时间:2016-07-12 13:59:41

标签: javascript php jquery ajax

我有一个PHP,它使用post获取参数,并在流程结束时将用户重定向到另一个页面。

因为整个过程最多需要6秒钟,所以我想添加一个加载GIF。 我创建了另一个显示图像的页面,并使用AJAX调用第一页。

无论我尝试过什么,我都无法让整个过程发挥作用。 最后我得到 XMLHttpRequest无法加载错误 - 请求的资源上没有“Access-Control-Allow-Origin”标头。因此,不允许原点“http://localhost:8888”访问。

这是调用PHP进程文件的页面代码:

<?php

function generateData(){
    global $dpost;
    foreach ($_POST as $key => $value){
        $dpost .= ',' . $key . ':"' .  $value . '"';
    }
    $dpost .= ',resultType:"pre"';
    $dpost = '{' . substr($dpost, 1) . '}';
}
?>

<html>
<head>
    <link rel="stylesheet" type="text/css" href="default.css">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
    <?php generateData(); ?>
    <script type="text/javascript" >
        console.log('1');
        var text='';
        $.ajax({
            url: 'f-api.php',
            type: 'post',
            headers: {  'Access-Control-Allow-Origin' : '*'},
            crossDomain : true,
            content_type: 'application/json',
            dataType: 'json',
            data: <?php global $dpost; echo $dpost; ?>,
            success: function(data) {
                console.log('OK')
                alert(text);
                $('.my_update_panel').html(data);
                $('#loading_spinner').hide();
            },
           error: function(data) {
               console.log('Error : ' + data);
            },
            beforeSend: function(xhr) {
                console.log('Before');
                xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
            }
        });
    </script>
    <div>
        <img src="img/loading-ls.gif">
    </div>
</body>
</html>

这是流程PHP文件中重定向到结束URL的代码:

        logger($lfn, 'DEBUG', 'Redirecting to ' . $url, $email);
    header('Access-Control-Allow-Origin: *;');
    header("Location: " . $url);
    die();

知道怎么解决这个问题吗? 或者也许是另一个我想要的东西?

1 个答案:

答案 0 :(得分:0)

  

否&#39;访问控制 - 允许 - 来源&#39;标头出现在请求的资源上

这是一个基本上说它不允许传入请求到页面的问题,可以通过在.htaccess文件中添加以下内容来修复:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

或者,对于您要将数据发送到的.php文件:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: *");