jqueryUi（Show Effect - > Drop）をPHPページに挿入するには

Question

データベースから自分のページに1つのエフェクトを使って書き込もうとしています。目的は、ページに自分のコメントを書くときに、それを効果とともに表示することです。

<?php 
    if(count($_POST) > 0){ 
     echo '<script language="javascript">'; 
     echo '$("#toggle").toggle("drop");'; 
     echo '</script>'; 

     $db = new mysqli("localhost", "root", "usbw", "trab_projeto"); 

     $qr = $db->query("INSERT INTO comments(comment) VALUES ('{$_POST['mensagem']}')"); 

     echo "<fieldset id='toogle'>"; 
     echo "<p>"; 
     $row = $db->query("SELECT * FROM comments ORDER BY comment_id DESC LIMIT 1")->fetch_assoc(); 
     echo $row["comment"]; 
     echo "</p>"; 
     echo "</fieldset>"; 
    } 
?> 

スクリプトの一部が機能しません。 これらのコードは、送信フォームをクリックすると実行されます。

<div class="cadastro"> 
    <form action="" id="form-msg" method="post" enctype="multipart/form-data"> 
     <fieldset> 
      <p> 
       <span><b>Escreva aqui o seu comentário:</b></span><br> 
       <textarea name="mensagem" style="margin: 0px; width: 511px; height: 119px;"></textarea> 
      </p> 
      <input type="submit" value="Enviar"> 
     </fieldset> 
    </form>  
</div> 

Answer 1

JSONレスポンスを返すためには、まず自分のheader()でこれを配置する必要があります。スクリプトはappendの上部には：

header('Content-type: javascript/json'); 

があなたのSQLインジェクションを防ぐために、上を移動する私はあなたが上のドキュメントを見つけることができますPDOにドライバを変更しました。

header('Content-type: javascript/json'); 
$driver = new PDO('mysql:host=localhost;dbname=trab_projeto', 'root', 'password'); 
$state = false; 
if(
    !isset($_POST['mensagem']) && 
    !empty($_POST['mensagem']) 
) { 
    $driver->Prepare('INSERT INTO comments (comment) VALUES (?)'); 
    $state = $driver->execute(array($_POST['mensagem'])); 
} 
if($state) 
{ 
    echo json_encode(array('status' => true)); 
    exit; 
} 
echo json_encode(array('status' => false)); 
exit; 

今後の通知として、この「コメント」は「スレッド」スコープには添付されません。 複数の投稿がある場合は、各投稿に一意のIDを付け、投稿IDとコメントを相互参照して、その特定の投稿のコメントを読み込むことができます。

あなたはそのようにのようなリクエストを送信するためにjQueryを使用することができます。

$(document).ready(function() { 
    var form = $('#form-msg'); 
    comment = form.closest('textarea').val(); 
    $.post('the_file_path.php', { mensagem: comment }) 
     .done(function(response) { 
      if(response.status) { 
       // todo: success using the effect below 
      } 
     }); 
}); 

注次のコードは、上記のあなたのsubmitボタンに添付click()を必要とします。このコード行を削除することを検討してください：

と使用：

<button type='button'>Enviar</button> 

をだからあなたがそうのような形を通してそれをターゲットにすることができます：

form.closest('button').click(function() { 
    // ... 
} 

示すときは、効果を使用することができます次のようにユーザーの端末にコメントしてください。

var commentToAdd = document.createElement('p'); 
commentToAdd.innerHTML = comment; 
$('#comments').append(commentToAdd); 
commentToAdd.show('slow');