Javascript 使用ajax提交数据后显示数据

我试图在使用ajax提交数据后显示数据。到目前为止，ajax在提交时仍然有效，但我必须刷新才能看到它

以下是jquery：

$('#submit-quote').live("submit", function(){
    var formdata = $(this).serialize();
    $.post("add.php", formdata, function(data) {
        console.log("success"); 
    });
    return false;
});

add.php中的php：

require('includes/connect.php');

$quote = $_POST['quote'];
$quotes = mysql_real_escape_string($quote);

echo $quotes . "Added to database";

mysql_query("INSERT INTO entries (quote) VALUES('$quotes')")
or die(mysql_error());

下面是我用来获取数据并显示数据的HTML/PHP：

<?php 
    require("includes/connect.php");

    $result = mysql_query("SELECT * FROM entries", $link);
    while($row = mysql_fetch_array($result)){ ?>
        <div class="quote-wrap group">
            <span>Like</span>
            <div class="quote">
                <p>
                <?php echo htmlentities($row['quote']); ?>
                </p>
            </div><!-- /.quote -->
        </div><!-- /.quote-wrap -->

 <?php } ?>

喜欢

如果需要，以下是表格：

<form id="submit-quote" method="post" >
     <h2> Submit A Quote </h2>
     <textarea name="quote">
     </textarea>
     <input type="submit" name="submit" value="Submit!">
</form>

提交报价

---

Ajax在提交时工作，但在发送后我也需要显示它，我如何才能做到这一点？

您的

success

回调函数中的

data

变量存储服务器响应。因此，要将服务器响应添加到DOM：

$(document).delegate("'#submit-quote'", "submit", function(){
    $.post("add.php", $(this).serialize(), function(data) {
        $('.inner').append('<div class="quote-wrap group"><span>Like</span><div class="quote"><p>' + data + '</p></div></div>');
    });
    return false;
});

请注意，我不再引用服务器响应（事实上，我同时删除了

数据

变量）。相反，我将

name=“quote”

元素的值保存在提交的表单中，并在AJAX请求返回后使用它（这样，在添加到DOM之前将quote添加到数据库中）。您可以将

.append（）

代码移到

success

回调之外，以便在表单提交时正确运行它（在

submit

事件处理程序中）

更新

$(document).delegate("'#submit-quote'", "submit", function(){
    var quoteVal = $(this).find('[name="quote"]').val();
    $.post("add.php", $(this).serialize(), function() {
        $('.inner').append('<div class="quote-wrap group"><span>Like</span><div class="quote"><p>' + quoteVal+ '</p></div></div>');
    });
    return false;
});

如果要创建要附加的DOM元素而不是捏造字符串，请执行以下操作：

$(document).delegate("'#submit-quote'", "submit", function(){
    var quoteVal = $(this).find('[name="quote"]').val();
    $.post("add.php", $(this).serialize(), function() {

        //create parent div and add classes to it
        $('<div />').addClass('quote-wrap group').append(

            //append the "like" span to the parent div
            $('<span />').text('Like');
        ).append(

            //also append the .quote div to the parent div
            $('<div />').addClass('quote').append(

                //then finally append the paragraph tag with the quote text to the .quote div
                $('<p />').text(quoteVal)
            )

        //then after we're done making our DOM elements, we append them all to the .inner element
        ).appendTo('.inner');
    });
    return false;
});

$（document）.delegate（“#提交报价单“，“提交”，函数（）{
var quoteVal=$（this.find（'[name=“quote”]'）.val（）；
$.post（“add.php”，$（this.serialize（），function（））{
//创建父div并向其添加类
$（“”）.addClass（'quote-wrap group'）.append(
//将“like”范围追加到父div
$（''）.text（'Like'）；
).附加(
//还要将.quote div附加到父div
$（''）.addClass（'quote'）.append(
//最后，将带有引号文本的段落标记附加到.quote div
$（'
'）。文本（quoteVal）
)
//然后在制作完DOM元素后，我们将它们全部附加到.inner元素
).appendTo（“.inner”）；
});
返回false；
});

您希望显示什么，成功消息还是提交到数据库的数据？正如您所知，

live

在jQuery 1.7.1中已被弃用。您应该在上使用

。较旧版本的jQuery应该使用
delegate
而不是
live
。在我看来，只要插入$quote，您就可以接受SQL注入，除非我错了，而且这不仅仅是字符串插值。小心！谢谢david和john，我只是一个初学者，所以我不知道：/我刚刚开始了解这些东西。这只返回add.php中的回声，即echo$quotes。“添加到数据库”。。我尝试了$（'.inner'）.html（数据），但这会从父对象中删除所有html，并插入add.php中回显的内容（.inner是显示数据的html的父对象）。对此，我很抱歉，我想使用
.append（）
而不是
.html（）
。前者将自身添加到
.inner
元素的末尾（或者如果要将其添加到开头，请使用
.prepend（）
.html（）
与
.empty（）.append（）相同）
。我的答案已更新。我复制并粘贴了您的代码，但它不起作用。刷新页面时，什么都不显示submitted@Trippy在
.append（）的末尾出现错误
call，有一个对
data
变量的引用未正确编撰。请重试该代码。更重要的是，您应该观看错误控制台，以快速发现这些类型的错误（而不是随机遇到错误）。谢谢。这是“有点”正在工作。它提交，但提交到的位置为空。刷新页面后，显示内容。