Question

我有一个单页网站，我的插件工作正常，但我似乎无法在提交后更新#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(); ?>

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

Answer 1

为什么不直接从成功返回数据？并用它来制作你的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
     }    
}

注意：您的php必须以json格式推送returnData。

Answer 2

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

但你必须为你的情境做一些改编;-) !! 我认为如果你使用的是独特的文件脚本，这是唯一的解决方案

Answer 3

要插入从php文件返回的数据，只需使用$（“element id or class”）。html（）函数将数据或html插入文档的特定区域

插入不工作后的jQuery AJAX刷新

3 个答案: