Question

我有一个PHP表单，它使用jQuery / AJAX将数据提交到MySQL数据库表中。目前，我有一条消息显示“完成！”表单提交后，但希望实际数据在提交后立即显示。我有一个循环设置来显示之前在div中使用类名为“msg_container”的消息，并希望在表单提交后在这些div中显示新数据。

最好的方法是什么？任何帮助将不胜感激！

index.php javascript

<script type="text/javascript">
    $(document).ready(function () {

        $(".button").click(function () {

            var user_id = $("textarea#uer_id").val();
            var msg = $("textarea#msg ").val();
            var dataString = 'user_id=' + user_id + '&msg=' + msg;

            $.ajax({
                type: "POST",
                url: "add.php",
                data: dataString,
                success: function () {
                    alert("Done!")
                }
            });
            return false
        });
    });
</script>

index.php查询

$user_id = $_GET['user_id'];

require_once('../../includes/connect.php');

$dbh = get_dbh($_SESSION['ORG_ID']);

$sth = $dbh->query ("SELECT *, user.last_name, user.first_name FROM msgs
                     INNER JOIN users
                     ON msgs.user_id = users.id
                     WHERE user_id = '$user_id'
                     ORDER BY timestamp");               

$row = $sth->fetch ();

index.php HTML

<div id="msgs">
    <?php while ($row = $sth->fetch ()) { ?>
    <div class="msg_container">
        <div class="left"><? echo $row['last_name'].', '.$row['first_name']; ?><br />
            <? $timestamp = date('m/d/Y g:i a', strtotime($row['timestamp'])); echo $timestamp; ?>
        </div>
        <div class="right"><? echo $row['msg']; ?></div>
        <div class="clear"></div>
    </div>
    <? } ?>
    <div class="add_note">
        <div class="left">Add Message</div>
        <div class="right">
            <form id="add_msg">
                <textarea id="msg" name="msg"></textarea>
                <input type='submit' class="button right-aligned" value='Submit' />
            </form>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
</div>

add.php

<?php

require_once('../../includes/connect.php');

$dbh = get_dbh($_SESSION['ORG_ID']);

$user_id = $_POST['user_id'];
$msg= $_POST['msg'];

date_default_timezone_set("UTC");
$timestamp = date('Y-m-d H:i:s', strftime(gmmktime())); 
date_default_timezone_set($_SESSION['TIME_ZONE']);

$sth = $dbh->prepare ("INSERT INTO msgs (id, user_id, msg, timestamp) VALUES (?, ?, ?, ?)");
$data = array (NULL, $user_id, $msg, $timestamp);

$sth->execute ($data);

session_write_close();

?>

Answer 1

您可以在之前的消息之后附加新消息。像这样：

 $.ajax({  
 type: "POST",  
 url: "add.php",  
 data: dataString,  
 success: function() {  
 alert ("Done!");
 $('#msgs').append('<div class="msg_container">' + 
 '<div class="left">' + lastNameVariable + ', ' + firstNameVariable + 
 '<br />' + timeStampVariable + 
 '</div><div class="right">' + msg + '</div>' +
 '<div class="clear"></div></div>');
 }  
 });

您需要将名字，姓氏，时间戳等放入变量中（或者以不同的方式进行，例如进行AJAX调用以获取信息 - 无论您喜欢什么）。我不知道user_id是什么，所以我只是想让你填写这些变量。

这只是您可以做的基本想法。如果您有任何疑问，请询问。

我希望这会有所帮助。

编辑：

如果您创建了另一个名为“getname.php”的页面或类似名称（以获取名字和姓氏），该页面将根据URL中传递的用户ID显示“名字，姓氏”，这可能有效。在URL中它可以有?user_id=1234567，然后在该页面上，它将执行mysql_query并显示名字和姓氏。这就是我要做的事情：

getname.php↓

<?
// ...
$user_id = $_GET['user_id'];
$result = mysql_query("SELECT * FROM table WHERE user_id = '$user_id' AND ...");
$row = mysql_fetch_array($result);
// ...
echo $row['last_name'] . ', ' . $row['first_name'];
// ...
?>

当然，你会按照查询的方式执行此操作，但希望这可以帮助您理解我所说的内容。然后，在你有了之后，你可以这样做：

 $.ajax({  
 type: "POST",  
 url: "add.php",  
 data: dataString,  
 success: function() {  
 alert ("Done!");
 var firstAndLast = '';
 var theTime = 
 $.get('getname.php?user_id='+user_id, function(data) {
 firstAndLast = data;
 });
 $('#msgs').append('<div class="msg_container">' + 
 '<div class="left">' + firstAndLast // this will display: "first name, last name" because of getname.php
 + '<br />' + theTime + 
 '</div><div class="right">' + msg + '</div>' +
 '<div class="clear"></div></div>');
 }  
 });

至于时间，您可以display it with JavaScript（当他们刷新它会显示PHP记录的时间时）或者像你为名字做的那样。

Answer 2

考虑jQuery ajax方法load。这是ajax的更高级别版本。您将发送您的请求，响应将立即放入前面的选择器元素。

$('#result').load('ajax/test.html', data);

Answer 3

这只是一个快速的想法，让你去。您需要从使用AJAX调用的脚本返回数据;您将用于生成所需DIV的数据。您还需要将ajax调用更改为以下内容：

$.ajax({  
      type: "POST",  
      url: "add.php",  
      data: dataString,  
      success: function(data) {
       console.log(data); //to see what's returned
       //use the data to generate content you want  
       alert ("Done!")
      }  
    });

由于数据的结构，最好发送JSON响应。

Answer 4

在成功部分添加此代码：

success: function(data){
$('#flash').css("display","block");;
setTimeout(function () {
$('#flash').slideUp();`enter code here`}, 2000);
}

在HTML中添加以下代码：

<div id="flash" style="display:none;">Data Saved Successfully</div>

如何使用jQuery和AJAX在表单提交后立即显示数据？

4 个答案:

编辑：