0

ユーザーに記入してもらいたい。それを送信し、データベースに保存してから、jquery を使用して、目の前の同じページに表示します。現在、データベースに送信することができますが、送信時に別のページ (/data.php) で開きます。また、ユーザーから送信されたばかりの正確な投稿を表示する方法がわからないため、ランダムに設定しました。

ここに私のdata.phpファイルがあります：

<?php
$con = mysql_connect("*****", "******", "******");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}

mysql_select_db("textwall", $con);

$sql="INSERT INTO textwalltable (story)
VALUES
('$_POST[story]')";

if (!mysql_query($sql,$con))
{
die('Error: ' . mysql_error());
}
echo "1 record added";

$sql = "SELECT * FROM textwalltable ORDER BY RAND() LIMIT 1;"; 
$query = mysql_query( $sql ); 

while($row = mysql_fetch_array($query)) { 
echo $row['story'];
}

mysql_close($con);
?>

そして私のHTMLページ：

<html>
<head>
<title>testing</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery.js"><\/script>')</script>

<script type="text/javascript">
function loadData()
{
  $("#txtHint").load("data.php");  
}
</script>   
</head>
<body>
<form action="data.php" method="post" onsubmit="loadData()">
    <div>
        <label for="comment">Type here:</label>
        <textarea id="story" name="story" rows="2" cols="20">
        </textarea>
        <div id="txtHint"></div>
    </div>
    <div>
    <div><input type="submit" value="Submit" class="submit"/></div>
</form>
</body>
4

3 に答える 3

1

ワークフローは次のとおりです。

1) ユーザーがフォーム送信をヒットします。

2) DOM から必要な情報を収集します。その情報をデータベースに入力するサーバー側スクリプトに情報を AJAX します。

3) JQuery を使用して、表示したい情報を DOM に挿入します。

4) 必要に応じて、不要になった HTML をページから削除します。

コードに関しては、AJAX 呼び出し用のJQueryajaxまたは関数を確認する必要があります。post

于 2012-11-13T22:28:18.413 に答える
0

これらのイベントを処理するには、javascript 関数 (jquery を使用) を使用できます。このメソッドはボタンを使用しないため、次の関数を呼び出す独自のボタンを作成する必要があります。

function postPage() {
    $.post("post.php", $("#form_id").serialize(), function(){
        $("#display_id").load('display.php');
    });
}

この場合、投稿値を「test.php」で処理し、投稿後にユーザーに表示したい内容をdisplay.phpで処理する必要があります。display.php のコンテンツは、「display」の ID を持つ div/container 内に配置されます。

于 2012-11-13T22:40:52.513 に答える
0

別の方法として、jquery に組み込まれている serialize 関数を $.post と共に使用すると、実際に多くのコードを記述する必要がなくなります。

html フォームとメッセージを表示する html:

<form action="data.php" method="post" class="commentForm">
    <div>
        <label for="comment">Type here:</label>
        <textarea id="story" name="story" rows="2" cols="20">
        </textarea>
        <div id="txtHint"></div>
    </div>
    <div>
    <div><input type="submit" value="Submit" class="submit"/></div>
</form>
<ul class="messages">
    <li>Some old message</li>
    <li>Some other old message</li>
</ul>

クライアントからサーバーに新しいメッセージを送信し、新しいメッセージをDOMに配置し、htmlフォームをリセットするjquery

//bind a click even to the submit
$('.commentForm input[type=submit]').click(function(){
      $(this).closest('form').find('input[type=submit]').value('Submitting');
      $.post(
       $(this).closest('form').attr('action'),
       $(this).closest('form').serialize(),
       function(responseFromServer){
          //get the message from the html form (don't need to send it back from the server)
          var message = $(this).closest('form').find('textarea');
          $('.messages').append('<li>'+message+'</li>');

          //resetting the html form
          $(this).closest('form').find('textarea').html('');
          $(this).closest('form').find('input[type=submit]').value('Submit');
       }
     );
     //prevent the form from actually sending in the standard fashion by returning false
     return false;
});

php

//get the post variable and make it safe for inputting into the db
$message = mysql_real_escape_string(html_entities($_POST['story']));
if(!empty($message)){
   //assuming you have a db connection
   $insert_query = mysql_query("INSERT INTO textwalltable VALUES($message)");
   echo 'message entered';
} else {
   echo 'no message';
}
于 2012-11-13T23:07:49.873 に答える