如何讓用戶提交表單中的文本並將其AJAX輸入到db並顯示在同一頁面上？

Question

我希望用戶填寫它。 提交它，將其存儲到數據庫中，然后使用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>

Answer 1

這是工作流程：

1）用戶點擊表格提交。

2）您從DOM收集了必要的信息。 您將信息AJAX到服務器端腳本中，該腳本將信息輸入數據庫。

3）您可以使用JQuery插入信息，但是要在DOM中顯示它。

4）如有必要，請刪除頁面上不再需要的所有html。

在代碼方面，您將要查看JQuery的ajax或post函數以進行AJAX調用。

Answer 2

您可以使用javascript函數（使用jquery）來處理這些事件。 此方法不使用按鈕，因此您將需要創建自己的按鈕，該按鈕將調用以下函數：

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

在這種情況下，您需要通過“ test.php”處理發布值，然后在display.php中發布后將其內容顯示給用戶。 display.php的內容將放在id為“ display”的div /容器中。

Answer 3

這是另一種方式，如果您將jquery內置的序列化功能與$ .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>

jQuery從客戶端向服務器發送新消息並將新消息放入DOM並重置html表單

//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';
}

如何讓用戶提交表單中的文本並將其AJAX輸入到db並顯示在同一頁面上？

問題描述

3 個解決方案

解決方案1
1 2012-11-13 22:28:18

解決方案2
0 2012-11-13 22:40:52

解決方案3
0 2012-11-13 23:07:49

如何讓用戶提交表單中的文本並將其AJAX輸入到db並顯示在同一頁面上？

問題描述

3 個解決方案

解決方案1 1 2012-11-13 22:28:18

解決方案2 0 2012-11-13 22:40:52

解決方案3 0 2012-11-13 23:07:49

解決方案1
1 2012-11-13 22:28:18

解決方案2
0 2012-11-13 22:40:52

解決方案3
0 2012-11-13 23:07:49