2016-04-09 12 views
0

私は、PHPとAIMLのプロジェクトで、ホットはマイクを通してユーザーからの質問に応答します。私はjQueryとJSの新機能ですので、ユーザ入力と最終出力の間にローディング効果を実装する際に助けが必要です。JSとPHPを使用して効果を読み込む

<?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> 

ページのロードなど、ユーザーのブラウザにマイクは、ユーザーが音声入力を終了した後、クエリはその結果をスクリプトに送信され、[talk.js_startDictation()経由]アクティブ化されるとすぐに<?php echo $display; ?>によって表示されます。

<?php echo $display; ?>の代わりに読み込みエフェクトを実装すると、スクリプトでクエリの結果が返され、ページの$display変数が更新されます。 - ロードjquery.js(あなたがCDNを使用するか、それをダウンロードすることができ)

1:

+0

[ajax](http://www.w3schools.com/php/php_ajax_php.asp)を使用していますか? – Chay22

+0

私はちょうどローディング効果を達成したい、私はそれを実装する方法を知らない! –

答えて

1

あなたは次のように、これをarchieveするAJAXを使用することができます。

2 - ローダーでdivを作成します(通常はgifは大丈夫ですが、たくさんあります)。 CSSでそれをHidde: - display:hidden;

3ページの一番下に追加します。

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

フォームが堤出され、jqueryの「キャッチ」要求、プロセス.submit()機能とポストを介してデータを送信します.phpファイルに作成してください(作成する必要があります)。$_POSTでパラメータを受け取ります。次のようなもの:

yourPhpFile.php 

<?php 

    $convo_id = $data['convo_id']; 
    //do something 
    ...  
?> 
関連する問題