JS ve PHP kullanarak yükleme efekti

Bir kullanıcı tarafından bir mikrofon aracılığıyla sorulan kullanıcı sorgularına yanıt veren, PHP ve AIML'deki bir projede çalışıyorum. JQuery ve JS için yeniyim, bu yüzden kullanıcı girişi ve son çıktı arasında yükleme efektinin uygulanmasında yardıma ihtiyacım var.JS ve PHP kullanarak yükleme efekti

<?php 
    $display = ""; 
    $thisFile = __FILE__; 
    if (!file_exists('../../config/global_config.php')); 
    require_once ('../../config/global_config.php'); 
    require_once ('../chatbot/conversation_start.php'); 
    $get_vars = (!empty($_GET)) ? filter_input_array(INPUT_GET) : array(); 
    $post_vars = (!empty($_POST)) ? filter_input_array(INPUT_POST) : array(); 
    $form_vars = array_merge($post_vars, $get_vars); // POST overrides and overwrites GET 
    $bot_id = (!empty($form_vars['bot_id'])) ? $form_vars['bot_id'] : 1; 
    $say = (!empty($form_vars['say'])) ? $form_vars['say'] : ''; 
    $convo_id = session_id(); 
    $format = (!empty($form_vars['format'])) ? $form_vars['format'] : 'html'; 
?> 
<!DOCTYPE html> 
<html> 
    <head> 
    <title>Interact With Sia</title> 
     <script src="jquery.js"></script> 
     <script type="text/javascript" src="talk.js"></script> 
    </head> 
    <body onload='document.getElementById("say").focus(); document.getElementById("btn_say").style.display="none";'> 
    <center> 
    <h3>Talk to Sia</h3> 
    <form id="chatform1" name="chatform" method="post" action="index.php#end" > 
     <!-- <label for="say">Say:</label> --> 
     <input type="text" name="say" id="say" size="70" onmouseover="startDictation()" style="color:red" /> 
     <input type="submit" class="say" name="submit" id="btn_say" value="say" /> 
     <script> 
      $('#say').trigger('mouseover'); 
     </script> 
     <input type="hidden" name="convo_id" id="convo_id" value="<?php echo $convo_id;?>" /> 
     <input type="hidden" name="bot_id" id="bot_id" value="<?php echo $bot_id;?>" /> 
     <input type="hidden" name="format" id="format" value="<?php echo $format;?>" /> 
    </form> 
    <br/><br/> 
     <?php echo $display; ?> //THIS DISPLAYS THE OUTPUT TO THE QUERY 
     </center> 
    </body> 
</html>

sayfa yüklenirken, kullanıcının tarayıcısında mikrofon ve kullanıcının sesli girişi tamamlandıktan sonra, sorgu ardından sonuç komut gönderilir ve [talk.js_startDictation() üzerinden] etkinleştirildiğinde kısa sürede <?php echo $display; ?> tarafından diplenmiştir.

Komut dosyası, sorgunun sonucunu döndürüp sayfadaki $display değişkenini güncelleyene kadar <?php echo $display; ?> yerine yükleme efekti nasıl uygulayabilirim? - Yük jquery.js (eğer CDN kullanmak veya indirmek olabilir)

kaynak

2016-04-09 Neeraj Singh

Aklın [ajax] (http://www.w3schools.com/php/php_ajax_php.asp): Böyle bir şey? – Chay22

Sadece yükleme etkisini elde etmek istiyorum, bunu nasıl yapacağımı bilmiyorum! –

Sen gibi arşivlemiştik AJAX kullanabilirsiniz.

2 - Bir yükleyici ile bir div oluşturun (genellikle bir gif iyidir, çok var). css ile Hidde: - display:hidden;

3 sayfanızın altındaki ekleyin:

<script> 
// Attach a submit handler to the form 
$("#chatform1").submit(function(event) { 
    // Start the loader 
    $('#loader').show(); 

    // Stop form from submitting normally 
    event.preventDefault(); 

    // Get some values from elements on the page: 
    var data = $(this).serialize(); 
    var url = "urlToYourPhpFile.php"; 

    // Send the data using post 
    var posting = $.post(url, { data: data }); 

    // Put the results in a div 
    posting.done(function(dataResponse) { 
    //do something with dataResponse 
    $('#loader').hide(); 
    }); 
}); 
</script>

formu sumitted edilir, jQuery'nin 'yakalama' talebi, süreç .submit() işlevleri ve posta yoluyla veri göndermek .php dosyasına (bunu oluşturmalısınız) ve paramları $_POST ile gönderin. kullanılarak

yourPhpFile.php 

<?php 

    $convo_id = $data['convo_id']; 
    //do something 
    ...  
?>

kaynak

2016-04-09 11:44:08

JS ve PHP kullanarak yükleme efekti

cevap

İlgili konular