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

【问题标题】：How to instantly display data after form submission using jQuery and AJAX?如何在使用 jQuery 和 AJAX 提交表单后立即显示数据？
【发布时间】：2011-11-19 03:50:44
【问题描述】：

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

添加.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();

?>

【问题讨论】：

标签： php ajax forms jquery

【解决方案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 记录的时间）或执行与 name 相同的操作。

【讨论】：

这很有帮助；但是，lastNameVariable 和 firstNameVariable 是基于来自 user_id 的连接查询。在追加数据之前有什么简单的方法可以重新查询？
@Michael：我正在编辑我的答案，里面有一些额外的东西；完成后我会告诉你...

【解决方案2】：

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

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

【讨论】：

【解决方案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 响应。

【讨论】：

【解决方案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>

【讨论】：