當我的控制器執行功能時顯示正在載入的圖像

Question

需要顯示圖像，而我的函數「Mailcontroller/sendMail」正在發送電子郵件。我通過表單中的提交按鈕從我的視圖中將值傳遞給此函數。我嘗試過在這裏看到的其他例子，但我無法得到我需要的東西。

我的觀點：

<div class="container" style="margin-right: 100px;"> 
 
    <div class="row"> 
 
     <div class="col-md-9 col-md-offset-3"> 
 
      <form class="form-horizontal" enctype='multipart/form-data' method="POST" action="<?=base_url();?>Cpersona/sendMail"> 
 
       <fieldset> 
 
        <div class="form-group"> 
 
         <div class="col-md-6"> 
 
          <label style="font-size: 15px; margin-left: 215px;">Destinatarios</label><br /> 
 
          <input type="button" name="agregardes" id="agregardes" onclick="llenarDestino();correos();" style="font-size: 15px; margin-left: 215px;" value="Agregar Destinatarios"> 
 
          <input style="margin-left: 215px;" id="email" name="email" type="text" class="form-control" required> 
 
          <label style="font-size: 15px; margin-left: 215px;">Asunto</label><br /> 
 
          <input style="margin-left: 215px;" type="text" class="form-control" name="asunto" id="asunto"> 
 
          <label style="font-size: 15px; margin-left: 215px;">Mensaje</label><br /> 
 
         </div> 
 
        
 
         <div class="col-md-9" style="float: right;"> 
 
          <textarea id="editor" name="mensaje"></textarea> 
 
         </div> 
 
        </div> 
 
        <section> 
 
         <div style="margin-left: 215px;"> 
 
         <p id="msg"></p> 
 
         <input type="file" id="file" name="file" /> 
 
         </div> 
 
        </section> 
 

 
        <div> 
 
         <br /> 
 
         <input style="margin-left: 215px;" class="btn btn-primary" type="submit" id="enviar" name="enviar" value="Enviar"> 
 
        </div> 
 
       </fieldset> 
 
      </form> 
 
     </div> 
 
    </div> 
 
</div>    
 

 
    <script type="text/javascript"> 
 
$(document).ready(function() {  
 
$('#enviar').click(function(){ 
 

 
    //Añadimos la imagen de carga en el contenedor 
 
    $('#content').html('<div><img src="../assets/images/loading.gif"/></div>'); 
 

 
    var page = $(this).attr('data');   
 
    var dataString = 'page='+page; 
 

 

 
    $.ajax({ 
 
     type: "GET", 
 
     url: "http://localhost/empresa/Cpersona/sendMail", 
 
     data: dataString, 
 
     success: function(data) { 
 
      //Cargamos finalmente el contenido deseado 
 
      $('#content').fadeIn(1000).html(data); 
 
     } 
 
    }); 
 
});    
 
});  
 
</script>

我控制器的摘錄：

 public function sendMail{ 

       $data = array(
       'id_usuario' => $usuario, 
       'fecha' => $fecha, 
       'id' => $cliente 
       ); 

      $this->Modelo_datos->historial($data); 

      $this->email->set_newline("\r\n"); 
      $this->email->from('correopruebas@consultora.cl'); 
      $this->email->to($value); 
      $this->email->subject($asunto); 
      $this->email->message($enviar); 

      //$path = set_realpath('./uploads/'); 
      //$adjunto = $path.$archivo; 

      if($this->email->send()) 
      { 

       $this->load->helper("file"); 
       delete_files('./uploads/'); 
       echo ("<SCRIPT LANGUAGE='JavaScript'> 
       window.alert('Correo Enviado!!') 
       window.location.href='verLista'; 
       </SCRIPT>"); 

      } 
      else 
      { 
       show_error($this->email->print_debugger()); 
       $this->load->helper("file"); 
       delete_files('./uploads/'); 
      } 

     } 

}

Answer 1

先添加圖像（要被顯示）與id加載器，並使用style =「displ隱藏它AY：無「;

loader = document.querySelector("#loader"); 
function sendMail() { 
    loader.style.display = "block"; 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     loader.style.display="none"; 
     // some thing here when email is sent 
    } 
}; 
xhttp.open("GET", "your_send_mail_file.php?send=true", true); 
xhttp.send(); 

}

和your_send_mail_file.php

<?php 
if (isset($_GET["send"]) && $_GET["send"] === "true") { 
    $test = new your_class(); // that_contain_the_sendMail function; 
    $test->sendMail(); 
}