如何在yii2 php中添加微调器/加载器 [英] How to add spinner/loader in yii2 php

问题描述

我想在我的一个表单中添加一个微调器/加载器。场景很简单：当我点击创建按钮时，它将显示一个微调器/加载器。在点击创建按钮时，会调用web服务，因此微调器/加载器将从调用start到call end显示。

I want to add a spinner/loader in one of my forms. The scenario is simple: When I hit the create button then it will show a spinner/loader. On hitting the create button a call to a web-service is made so the spinner/loader will show from call start to call end.

以下是我的控制器：

$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服务，在此期间我想显示一个微调器/加载器。

As told above when I press the Verify Communication button a call is made to the web-service and during this time I want to show a spinner/loader.

用于创建/显示微调器/加载器我已搜索很多文章。

For creating/showing a spinner/loader I have searched many articles.

1. 显示正在加载


2. Kartik Spinner


3. 提交Spinner


4. Yii2 Model Loader


5. Yii2 Jquery Loading

1. Show Loading
2. Kartik Spinner
3. Submit Spinner
4. Yii2 Model Loader
5. Yii2 Jquery Loading

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

But none of the above articles have mentioned the full implementation details. Although I have tried each and every step mentioned in the articles.

任何帮助都将受到高度赞赏。

Any help would be highly appreciated.

推荐答案

未对用户请求进行验证

$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 request need to be moved to separated method

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;
}

现在回答你的问题
你需要添加点击事件到你的按钮。你使用Yii2他的jQuery用于更强大的DOM工具。使用$ .hide（）和$ .show（）为你的按钮类和绘制预加载器。如果您需要来自服务器的保存数据的反馈，您可以使用Promise。

And now answer to your question You need add click event to your button. You using Yii2 his have jQuery for more powerful DOM-tools. Use $.hide() and $.show() for you button class and draw preloader. You can use Promise if you need feedback from server of his save data.

这篇关于如何在yii2 php中添加微调器/加载器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！