0

我有一个单页网站，插入工作正常，但提交后似乎无法更新#results div。这些值被插入到数据库中就好了，如果我硬刷新它们就会出现。但不是用 jQuery AJAX 刷新。我是 Ajax 新手，因此非常感谢任何帮助，以及对代码结构或不良习惯的任何评论，请在我尝试学习正确的编程方法时发表评论。

这是我的代码：

$(document).ready(function(){        

$("form#addTodo").submit(function(){
    alert('hello world'); // ensure function is running

    var post_title = $('input#post_title').val(); // take values from inputs
    var post_content = $('input#post_content').val();

    $.ajax({
        type: "POST",
        url: "add.php",
        data: "post_title=" + post_title + "&post_content=" + post_content,
        success: function() {
            // alert('success'); // ensure success
            $('#results').fadeOut('slow').load('include/results.php').fadeIn('slow');               
        }
    });


    $('input#post_title').val(''); // clear form fields
    $('input#post_content').val('');

    return false; 
});

});

这是 results.php 文件：

<?php

$sql = $db->query('SELECT id, post_title, post_content FROM posts ORDER BY post_title ASC');

$results = $sql->fetchALL(PDO::FETCH_OBJ);
$count_posts = count($results);

?>

<?php if ( have_posts() == true) : ?>
    <div class="accordion" id="accordion_main">
        <?php foreach($results as $entry): ?>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_main" href="#collapse-<?php echo $entry->id; ?>">    
                        <?php echo $entry->post_title; ?>
                    </a>    
                </div>
                <div id="collapse-<?php echo $entry->id; ?>" class="accordion-body collapse">   
                    <div class="accordion-inner">
                        <p class="target"><?php echo $entry->post_content; ?></p>
                        <p><a href="edit.php?id=<?php echo $entry->id; ?>">Edit</a> <a href="delete.php?id=<?php echo $entry->id; ?>" onclick="return confirm('Are you sure you wish to delete this post?');">Delete</a></p>                    
                    </div>
                </div>
            </div>
        <?php endforeach; ?>                
    </div>
<?php else: ?>
    <h3>There are no posts to display at this time.</h3>
<?php endif; ?>

当它包含在 index.php 中时，它工作正常，我只是无法在将数据发布到数据库后刷新它。

<?php
require_once 'includes/db.php';
require_once 'includes/functions.php';
?>

<?php get_header(); ?>

<div id="results">
<?php include_once 'includes/results.php'; ?>
</div>

<hr />
<p>Add New Post</p>

<form id="addTodo" action="">

<div>
    <label for="post_title">Post Title</label>
    <input id="post_title" name="post_title">
</div>

<div>
    <label for="post_content">Post Content</label>
    <input id="post_content" name="post_content">
</div>

<div>
    <button id="submit" type="submit">
        Save
    </button>
</div>

</form>

<?php get_footer(); ?>

我应该提到我还没有进行表单验证。非常感谢任何帮助，谢谢。

4

3 回答 3

0

为什么不直接从成功中返回数据？并用它来制作你的 html 输入

success:function(returnedData) {
     if (returnedData.status = 'successful') {
       //use javascript to append the data for example like 
       //returnedData.message to make html and insert into your current html
     }    
}

注意：returnedData 必须由您的 php 以 json 格式推出。

于 2013-01-21T23:27:45.860 回答
0

如果您阅读我最近回答的这个帖子，您可以找到与您的请求类似的答案：Jquery Mobile Post to PHP (same page)

但是您必须根据上下文进行一些调整；-) !! 如果您使用唯一的文件脚本，我认为这是唯一的解决方案

于 2013-01-22T00:57:21.753 回答
0

要插入从 php 文件返回的数据，只需使用 $("element id or class").html() 函数将数据或 html 插入到文档的特定区域

于 2013-01-22T05:33:01.540 回答