1

最近、AJAX の学習を開始し、ex で見られるようにコメント セクションを作成しようとしています。送信されたコメントを読み込むために必要なページの更新がない youtube。ここに私がこれまでに持っているものがあります：

HTML:

<head><script src="JS/AJAX.js"></script>
<body>
  <form method="post" action="">
    User: <input type="text" id="name" /><br>
    Comment:<br>
    <textarea rows="5" cols="50" wrap="on" id="comment></textarea><br>
    <button id="submit">Submit</button>
  </form>

  <h3>Comments go here:</h3>
  <div id="commentarea"></div>
</body>

ページを更新せずにデータベースにコメントを挿入する方法がわかりません。アクションとしてinsert.php（フィールドからデータベースにデータを挿入する）を使用すると、ページが更新されます。

JS/AJAX (現時点では XMLHttpRequest(); を使用しており、ブラウザーを見つけるための try および catch ブロックは含まれていません):

function ajaxFunction(){
  var ajaxRequest = new XMLHttpRequest();

  ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
      document.getElementById("commentarea").innerHTML = ajaxRequest.responseText;
      }
  }
  ajaxRequest.open("GET","fetch-data.php",true);
  ajaxRequest.send(null);
}

PHP (フェッチ-data.php):

<?php
$con = mysql_connect("localhost","root","") or die(mysql_error());

$mysql_select_db('localh',$con);

$query = mysql_query("SELECT User, UserComment FROM content");
if(!$query){
  die(mysql_error());
}

while($row = mysql_fetch_array($query)){
  echo "<h3>".$row['User']."</h3>"."<br>";
  echo "<p>".$row['UserComment']."</p>";
}

mysql_free_result($query);
mysql_close($con);
?>

個別にロードするか、「include」を使用して、フェッチ プロセスが機能することを示します。

送信を押した後にこれを理解したので、コメントとユーザーをデータベースに挿入する必要があります。次に、ajax は fetch-data スクリプトを使用してデータを取得し、それを ID "commentarea" の div に追加する必要があります。これがどのように機能するのか、より正確には、フォームから ajax 関数を呼び出す方法がわかりません。

4

1 に答える 1

1

form action ="..."プロパティでjavascript関数を呼び出すことができます。その関数がfalseを返す場合、フォームは通常のPOSTリクエストでは送信されませんが、入力データをajaxリクエストに使用できます。

于 2012-11-18T13:17:32.387 に答える