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调用的ajax或post函数。

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 个答案: