Question

我正在使用jquery的.ajax函数将数据发送到数据库表并在页面上显示数据而不刷新页面。

在我显示db表中内容的查询中，每个条目都包含在一个名为 .wrap 的div类中

该类的底部边距为30像素。当我使用我的表单，并显示新添加的数据时，css不会显示。边距不存在，但是当我手动刷新页面时，css会生效。可能是什么问题呢？以下是我的代码

$(function() {
    $('#form').submit(function(e) {

        var data = $(this).serialize();

        // Stop the form actually posting
        e.preventDefault();

        // Send the request
        $.ajax({
            type: "POST",
            url: "submit.php",
            data: data,
            cache: false,
            beforeSend: function() {
                var error = '';

                if (!$.trim($("#cat").val())) {
                    error = "<p>the cat field is empty</p>";
                }

                if (!$.trim($("#box").val())) {
                    error += "<p>the box field is empty</p>";
                }

                if (error) {
                  $(".fb-error").html(error);
                  $(".fb-error").css( "display", "block" );
                  xhr.abort();
                }                       

                },
            success: function(html){
                 $(".fb-error").css( "display", "none" );
                $('textarea#box').val('');
                $("#box-wrap").prepend(html);
            }
        });
    });
});

编辑：

问题在于，当我提交表单并且第一次显示内容时，我的.wrap类不会出现在新内容周围。但是当我刷新页面时，.wrap类会出现在新添加的内容周围。

所以问题是在新内容出现后立即缺少.wrap类但我不知道为什么或如何修复它。除了新部分之外，.wrap类围绕着每个数据。

每一行都在它自己的类中。像

<div class="wrap">row 3</div>
<div class="wrap">row 2</div>
<div class="wrap">row 1</div>

当我通过ajax发送表单时向数据库添加新条目时，这就是它的样子。

row 4
<div class="wrap">row 3</div>
<div class="wrap">row 2</div>
<div class="wrap">row 1</div>

刷新后看起来像

<div class="wrap">row 4</div>
<div class="wrap">row 3</div>
<div class="wrap">row 2</div>
<div class="wrap">row 1</div>

我在服务器端显示结果的方式

foreach ($query as $row) {
        echo '<div class="wrap">' . $row["box"] . '</div>';
    }

这是我的submit.php。我已经把所有东西都清理干净了。这正是我目前正在使用的。

include 'connect.php';

$string = strip_tags($_POST["box"]);

$stmt = $dbh->prepare("INSERT INTO boxes (box) VALUES (:box)");

$stmt->execute(array(
":box" => $string
));

Answer 1

只需更改此内容......

$("#box-wrap").prepend(html);

......对此...

$("#box-wrap").prepend('<div class="wrap">' + html + '</div>');

它应该工作得很好（假设您的AJAX总是只返回一行添加 - 如果没有，您需要在服务器端进行相同的更改，否则执行更复杂的结果解析）。

使用.ajax提交和显示数据但css在页面刷新之前不会生效

1 个答案: