Question

我试图在用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在提交时有效，但我也需要在发送后显示它，我该怎么做？

Answer 1

data回调函数中的success变量存储服务器响应。所以要将服务器响应添加到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;
});

如果您需要使用事件委托（例如，表单并不总是存在于DOM中），则使用.delegate()而不是.live()，因为后者已从jQuery 1.7开始折旧。

此外，您并不需要在变量中缓存$(this).serialize()，因为它只被使用一次（创建变量是不必要的开销）。

由于您的PHP代码输出echo $quotes . "Added to database";，服务器响应将是附加到字符串中的“添加到数据库”的引号，该引号将添加到您的引号列表中。

<强>更新

$(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;
});

请注意，我不再引用服务器响应（实际上我一起删除了data变量）。相反，我在提交的表单中保存name="quote"元素的值，并在AJAX请求返回后使用它（这样引用在添加到DOM之前添加到数据库中）。您可以将.append()代码移到success回调之外，以便在提交表单时（在submit事件处理程序中）正确运行。

<强>更新

如果你想创建一个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;
});

使用ajax提交后显示数据

1 个答案: