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 的内容将被放置在 id 为“display”的 div/container 中。

于 2012-11-13T22:40:52.513 回答
0

这是另一种方式，如果您使用 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';
}
于 2012-11-13T23:07:49.873 回答