如何让用户提交表单中的文本并将其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