Php 使用'；装载'；消息

现在我在控制器中从cURL加载数据，并在视图文件中显示数据，但是从cURL加载需要很长时间，所以我的webiste也加载了很长时间

我想创建加载效果，只需使用“加载，请稍候”加载我的所有页面。消息直到cURL数据可用，然后隐藏加载消息并显示我的数据

我该怎么做

我的代码：

控制器：

public function open_inventory($steam_id, $appid = 730, $contextid = 2)
{
    $data = array("steamid" => $steam_id, "appid" => $appid);

    $cache_file = $this->config->item('inv_dir')."/".$data['steamid']."_".$data['appid'].".json";

    if (file_exists($cache_file) && (filemtime($cache_file) > (time() - 60 * 60 ))) // 1 hour cache
    {
       $output = file_get_contents($cache_file);
    }
    else
    {
        // out-of-date
        $data_string = json_encode($data);                                                                                   

        $ch = curl_init('http://localhost:3000');                                                                      
        curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");                                                                     
        curl_setopt($ch, CURLOPT_POSTFIELDS, $data_string);                                                                  
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);                                                                      
        curl_setopt($ch, CURLOPT_HTTPHEADER, array(                                                                          
            'Content-Type: application/json',
            'Content-Length: ' . strlen($data_string))
        );
        $output = curl_exec($ch);

        file_put_contents($cache_file, $output, LOCK_EX);
    }

    $json = json_decode($output,true);

    if($json['data'])
    {
        return $json;
    }

    return false;
}

<?php foreach ($items as $item): ?>
    <div class="item-slot animated zoomIn" data-id="<?= $item['id'] ?>
        <p><?= $item['name'] ?></p>
    </div>
<?php endforeach; ?>

视图中的

$items

是控制器中的

$json['data']

查看：

public function open_inventory($steam_id, $appid = 730, $contextid = 2)
{
    $data = array("steamid" => $steam_id, "appid" => $appid);

    $cache_file = $this->config->item('inv_dir')."/".$data['steamid']."_".$data['appid'].".json";

    if (file_exists($cache_file) && (filemtime($cache_file) > (time() - 60 * 60 ))) // 1 hour cache
    {
       $output = file_get_contents($cache_file);
    }
    else
    {
        // out-of-date
        $data_string = json_encode($data);                                                                                   

        $ch = curl_init('http://localhost:3000');                                                                      
        curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");                                                                     
        curl_setopt($ch, CURLOPT_POSTFIELDS, $data_string);                                                                  
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);                                                                      
        curl_setopt($ch, CURLOPT_HTTPHEADER, array(                                                                          
            'Content-Type: application/json',
            'Content-Length: ' . strlen($data_string))
        );
        $output = curl_exec($ch);

        file_put_contents($cache_file, $output, LOCK_EX);
    }

    $json = json_decode($output,true);

    if($json['data'])
    {
        return $json;
    }

    return false;
}

<?php foreach ($items as $item): ?>
    <div class="item-slot animated zoomIn" data-id="<?= $item['id'] ?>
        <p><?= $item['name'] ?></p>
    </div>
<?php endforeach; ?>

您可以应用的一种方法是使用Ajax

AJAX是异步JavaScript和XML的缩写，该技术帮助我们从服务器加载数据，而无需刷新浏览器页面。在您的例子中，一旦加载了javascript-ajax文件，就可以向控制器所在的路由发送ajax调用。在控制器中，您可以返回JSON、XML、HTML等格式的数据，。。。在successcallback函数中（如果请求成功将调用该函数），您将从服务器获取数据作为第一个参数，然后可以隐藏等待并将获取的数据附加到DOM元素。


HTML:


请稍等。。。。

JS:

$（函数（）{
//可以发送到服务器的数据
变量数据={key1:'value1'，key2:'value2'}；
日志（“数据：”，数据）；
$.ajax（{url:'/path_to_your_php_controller'，//替换您的url
数据：数据，
键入：“post”，
数据类型：“json”，
成功：功能（响应）{
//这里隐藏等待容器
$（“#等待容器”）.hide（）；
控制台日志（响应）；
var字符串=“”；
$.map（响应、函数（val）{
//生成Html
字符串+=“”+val.name+“
”；
});
//将生成的Html添加到元素中。
$（“#items”）.html（字符串）；
},
错误：函数（jqXHR，异常）{
if（jqXHR.status==0）{
警报（'未连接。\n验证网络'）；
}else if（jqXHR.status==404）{
警报（“未找到请求的页面。[404]”）；
}else if（jqXHR.status==500）{
警报（“内部服务器错误[500]”）；
}else if（异常==='parserrror'）{
警报（'请求的JSON解析失败'）；
}else if（异常==='timeout'）{
警报（“超时错误”）；
}否则如果（异常==='abort'）{
警报（“Ajax请求已中止”）；
}否则{
警报（'未捕获错误。\n'+jqXHR.responseText）；
}
}
});
})
$（文档）。在（“单击“，”.item slot”，函数（）上{
警报（$（this.data（'id'））；
});

PHP:



下面是一个您可能会发现有助于理解的示例
您是否使用Ajax向控制器发送请求？@Matt.k我从未使用过Ajax，这就是我在这里提问的原因。我不知道怎么做。我试着在我的控制器中使用
POST
，它现在返回
parserror
。怎么了？出现该错误的原因是因为您返回了一个字符串或另一个fomat，它不是真正的Json，所以解析器失败。因此，删除dataType:json属性，它不会将其解析为json，以查看是否返回响应。然后，如果是字符串，您可以使用json.parse（response）将其转换为json对象
jQuery
代码应该在
$（文档）中。准备好了（function（）{}）
？是的，当所有DOM元素都可以访问时，当我们返回或响应时，我们就可以访问我们的元素以向其添加新的HTML。现在加载很好，但在ajax
之前，我在
项目槽
类上单击
方法，现在它不工作了。怎么了？
 <?php
    public function open_inventory()
    {
       // your code here 

       // array of object 
        $arr = array ({'id'=>123,'name'=>'name 1'},{'id'=>2345,'name'=>'name 2'},{'id'=>3423,'name'=>'name 3'},);

       echo json_encode($arr); 
    }

?>