Javascript 如何在yii2php中添加微调器/加载器_Javascript_Jquery_Yii2_Spinner_Yii2 Advanced App

Javascript 如何在yii2php中添加微调器/加载器

javascript jquery yii2

Javascript 如何在yii2php中添加微调器/加载器,javascript,jquery,yii2,spinner,yii2-advanced-app,Javascript,Jquery,Yii2,Spinner,Yii2 Advanced App,我想在我的一个表单中添加一个微调器/加载器。场景很简单：当我点击create按钮时，它将显示一个微调器/加载器。点击create按钮时，会调用web服务，因此微调器/加载器将从调用开始显示到调用结束下面是我的控制器： $m = MetersInventoryStore::findOne($_REQUEST['selected_meters']); $msn = $m->meter_serial; // current selected meter serial number is sav

我想在我的一个表单中添加一个微调器/加载器。场景很简单：当我点击

create

按钮时，它将显示一个微调器/加载器。点击create按钮时，会调用web服务，因此微调器/加载器将从调用开始显示到调用结束

下面是我的控制器：

$m = MetersInventoryStore::findOne($_REQUEST['selected_meters']);
$msn = $m->meter_serial; // current selected meter serial number is saved

$date_time = str_replace(' ', 'T', date('Y-m-d H:i:s')); // current date time

$api_url = 'http://xx.xxx.xxx.xxx:7000/api/meters/GetByMsn/' . $msn . '/' .$date_time; // my base URL

$curl = curl_init($api_url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_TIMEOUT, 1000);
curl_setopt($curl, CURLOPT_HTTPHEADER, array('Authorization:key'));

$curl_response = curl_exec($curl);
$json = json_decode($curl_response);
$meter_alive = $json->data->Response;
.
.
.
.
// my other code that is saving data
.
.
.
.
return $this->render('create', ['model' => $model,]);

“提交”按钮如下所示：

<div class="form-group">
   <?= Html::submitButton($model->isNewRecord ? 'Verify Communication' : 'Update', ['id'=> 'spin','name'=>'create','class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-success']) ?>

</div>

如上所述，当我按下

验证通信

按钮时，会调用web服务，在此期间，我希望显示一个微调器/加载器

为了创建/显示微调器/加载器，我搜索了许多文章

但上述文章都没有提到完整的实施细节。尽管我已经尝试了文章中提到的每一步

任何帮助都将不胜感激。

为什么不在每个页面加载上放置加载器，而不是在提交按钮上。这可以通过在主布局中进行更改来实现

<style>
        /*loader css*/

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}



</style>


/*加载器css*/
#装载机{
位置：绝对位置；
左：50%；
最高：50%；
z指数：1；
宽度：150px；
高度：150像素；
利润率：-75px 0-75px；
边框：16px实心#F3；
边界半径：50%；
边框顶部：16px实心#3498db；
宽度：120px；
高度：120px；
-webkit动画：旋转2s线性无限；
动画：旋转2s线性无限；
}
@-webkit关键帧旋转{
0%{-webkit变换：旋转（0度）；}
100%{-webkit变换：旋转（360度）；}
}
@关键帧旋转{
0%{变换：旋转（0度）；}
100%{变换：旋转（360度）；}
}
/*将动画添加到“页面内容”*/
.制作底部动画{
位置：相对位置；
-webkit动画名称：animatebottom；
-webkit动画持续时间：1s；
动画名称：animatebottom；
动画持续时间：1s
}
@-webkit关键帧animatebottom{
从{底部：-100px；不透明度：0}
至{底部：0px；不透明度：1}
}
@关键帧动画块{
从{底部：-100px；不透明度：0}
到{底部：0；不透明度：1}
}

为函数添加脚本

<script>
var myVar;

function myFunction() {
  myVar = setTimeout(showPage, 0000);
}

function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("container").style.display = "block";
}
</script>


var-myVar；
函数myFunction（）{
myVar=设置超时（显示页，0000）；
}
函数showPage（）{
document.getElementById（“加载器”）.style.display=“无”；
document.getElementById（“容器”）.style.display=“块”；
}

最后，通过将onload函数与body绑定来调用该函数

    <body onload="myFunction()">
        <div id="loader"></div>
<section id="container" style="display:none;" class="animate-bottom">
</section>
    </body>

用户请求时不进行验证

$m = MetersInventoryStore::findOne($_REQUEST['selected_meters']);

太多了

$msn = $m->meter_serial;

这样做

$api_url = 'http://xx.xxx.xxx.xxx:7000/api/meters/GetByMsn/' . $m->meter_serial . '/' .$date_time;

需要将Curl请求移动到分离方法

function curlRequest(msn) {
  $api_url = 'http://xx.xxx.xxx.xxx:7000/api/meters/GetByMsn/' . $msn . '/' .$date_time; // my base URL
  $curl = curl_init($api_url);
  curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($curl, CURLOPT_TIMEOUT, 1000);
  curl_setopt($curl, CURLOPT_HTTPHEADER, array('Authorization:key'));
  $curl_response = curl_exec($curl);
  $json = json_decode($curl_response); // WTF snake case only in Python

  return $json->data->Response;
}

现在回答你的问题

您需要将单击事件添加到按钮。使用yii2his可以使用jQuery获得更强大的DOM工具。对按钮类和绘图预加载程序使用$.hide（）和$.show（）。如果您需要服务器对其保存数据的反馈，您可以使用Promise。

到目前为止您尝试了什么？您应该添加问题中的代码。目前您没有显示任何显示您正在执行的操作的代码，也没有您正在谈论的任何Ajax调用。因为它可能有助于发现问题，而您从未提到您有什么问题，为什么您认为简单的表单提交会允许用户在调用

$this->render（）

之前显示视图或该视图中加载的脚本/css？你还没有理解这个问题