如何将新数据加载到div中?

时间:2014-01-14 13:23:02

标签: php jquery ajax html post

我的网站上有一个评论部分。 在页面的中心是从数据库中检索的所有评论。

在同一页面上,您可以撰写新的评论。 关键是要撰写评论并提交。 如果审核已提交,则应在我的其他评论之上加载ajax。

js:

$(document).ready(function() {
        $("#submit").click(function() {
            var restaurant = $('#restaurant').rateit('value');
            var service = $('#service').rateit('value');
            var food = $('#food').rateit('value');
            var name = $('#name').val();
            var description = $('#desc').val();
            var dataString = 'name='+name+'&description='+description+'&restaurant='+restaurant+'&food='+food+'&service='+service;

            $.ajax({
                type: "POST",
                url: "reviewprocess.php",
                data: dataString,
                success: function() {
                    $('#blee').load()
                            .hide()
                            .fadeIn(1500, function() {
                            });
                }
            });
            return false;
        });
});

评论部分:

<ble id="blee">
    <?php
        $query = $sql->query("SELECT * FROM reviews");
        while($review=$query->fetch_object()){
    ?>
    <div class="section2_box">
        <header>
            <b><?php echo $review->name ?></b><br><hr>
            <table>
                <tr>
                    <td>Restaurant </td>
                    <td>
                        <div class="rateit" data-rateit-value="<?php echo $review->restaurant ?>" data-rateit-ispreset="true" data-rateit-readonly="true">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Bediening </td>
                    <td>
                        <div class="rateit" data-rateit-value="<?php echo $review->service ?>" data-rateit-ispreset="true" data-rateit-readonly="true">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Eten </td>
                    <td>
                        <div class="rateit" data-rateit-value="<?php echo $review->food ?>" data-rateit-ispreset="true" data-rateit-readonly="true">
                        </div>
                    </td>
                </tr>
            </table><hr>
            <p><?php echo $review->description ?></p>
        </header>
    </div>
    <?php
        }
    ?></ble>

表格:

<form action="" method="POST" id="comment">
            <b>Geef beoordeling!</b><br><hr>
            <table>
                <tr>
                    <td>Restaurant</td>
                    <td><div class="rateit" id="restaurant"></div></td>
                </tr>
                <tr>
                    <td>Bediening</td>
                    <td><div class="rateit" id="service"></div></td>
                </tr>
                <tr>
                    <td>Eten</td>
                    <td><div class="rateit" id="food"></div></td>
                </tr>
            </table><hr>
                Naam: <br><input type="text" name="name" id="name"><br>
                Omschrijving: <br><textarea name="description" id="desc" cols="30" rows="4"></textarea>
                <br><br>
                <input type="submit" name="submit" value="Beoordeel!" class="bl" id="submit">
            </form>

Reviewprocess.php:

include('connect.php');
$name = $_POST['name'];
$description = $_POST['description'];
$service = $_POST['service'];
$food = $_POST['food'];
$restaurant = $_POST['restaurant'];

$sql->query("INSERT INTO reviews (restaurant, service, food, name, description) VALUES      ('$restaurant', '$service', '$food', '$name', '$description')");

提交表单后,数据成功存储在数据库中。

我的问题是新评论没有显示在'#blee'中,直到我刷新页面。 如何将新评论显示在“#blee”中?

3 个答案:

答案 0 :(得分:0)

试试这个:

success: function() {
    var obj = '
        <div class="section2_box">
            <b>'+name+'</b><br><hr>
            <table>
                <tr>
                    <td>Restaurant </td>
                    <td>
                        <div class="rateit" data-rateit-value="'+restaurant+'" data-rateit-ispreset="true" data-rateit-readonly="true">
                    </div>
                </td>
            </tr>
            <tr>
                <td>Bediening </td>
                <td>
                    <div class="rateit" data-rateit-value="'+service+'" data-rateit-ispreset="true" data-rateit-readonly="true">
                    </div>
                </td>
            </tr>
            <tr>
                <td>Eten </td>
                <td>
                    <div class="rateit" data-rateit-value="'+food+'" data-rateit-ispreset="true" data-rateit-readonly="true">
                    </div>
                </td>
            </tr>
        </table><hr>
        <p>'+description+'</p>
        </div>
    ';
    $('#blee').append(obj);
}

答案 1 :(得分:0)

试试这个:

$(document).ready(function() {
    $("#submit").click(function() {
        var restaurant = $('#restaurant').rateit('value');
        var service = $('#service').rateit('value');
        var food = $('#food').rateit('value');
        var name = $('#name').val();
        var description = $('#desc').val();
        var dataString = 'name='+name+'&description='+description+'&restaurant='+restaurant+'&food='+food+'&service='+service;

        $.ajax({
            type: "POST",
            url: "reviewprocess.php",
            data: dataString,
            success: function() {
                $('#blee').empty()  
                $('#blee').append()
                        .hide()
                        .fadeIn(1500, function() {
                        });
            }
        });
        return false;
    });
});

在您的代码中添加“reviewprocess.php”

include('connect.php');
$name = $_POST['name'];
$description = $_POST['description'];
$service = $_POST['service'];
$food = $_POST['food'];
$restaurant = $_POST['restaurant'];

$sql->query("INSERT INTO reviews (restaurant, service, food, name, description) VALUES        ('$restaurant', '$service', '$food', '$name', '$description')");

   $query = $sql->query("SELECT * FROM reviews");
    while($review=$query->fetch_object()){

  $returnData .= ' <div class="section2_box">
    <header>
        <b> echo $review->name</b><br><hr>
        <table>
            <tr>
                <td>Restaurant </td>
                <td>
                    <div class="rateit" data-rateit-value=" $review->restaurant" data-rateit-ispreset="true" data-rateit-readonly="true">
                    </div>
                </td>
            </tr>
            <tr>
                <td>Bediening </td>
                <td>
                    <div class="rateit" data-rateit-value=" $review->service " data-rateit-ispreset="true" data-rateit-readonly="true">
                    </div>
                </td>
            </tr>
            <tr>
                <td>Eten </td>
                <td>
                    <div class="rateit" data-rateit-value=" $review->food " data-rateit-ispreset="true" data-rateit-readonly="true">
                    </div>
                </td>
            </tr>
        </table><hr>
        <p> $review->description </p>
    </header>
</div>
    }';

 echo $returnData;

答案 2 :(得分:0)

您可以直接从php文件

加载数据
$('#blee').load('reviewprocess.php');

此外,您可以在加载中发送变量:

$('#blee').load("reviewprocess.php?"+dataString);

您可以通过以下方式显示#blee

$('#blee').load('reviewprocess.php',function(){$('#blee').fadeIn(300);});
//It will show #blee after load() fn, of course you have to apply css display none before load()
//I think, only this last line will work for you