javascript - 如何仅从 ajax().done() 附加一个 div

Question

我在使用以下 javascript 时遇到问题。当按下#search_room_button 时，它将运行并用整个网站的副本替换#matched_rooms div。但是，我只希望返回新的#matched_rooms div，从而替换旧的。如何做到这一点？

<script type="text/javascript">
    $(function() {
        $("#search_room_button").on('click', function() {

            $("#matched_rooms").html("<p>LOADING</p>");

            $.ajax({
                url: 'book.php',
                type: 'GET',
                data: {
                    'rtid': 1,
                    'date': $("#date").val(),
                    'time': $(".ui_tpicker_time").text(),
                    'duration': 4
                }
            }).done(function(data) {
                $("#matched_rooms").html(data, "#matched_rooms");
            })
        })
    });


</script>

Answer 1

您可以使用 $.load而不是 $.ajax。

$('#surrounding_element').load('book.php #matched_rooms', {
                'rtid': 1,
                'date': $("#date").val(),
                'time': $(".ui_tpicker_time").text(),
                'duration': 4
});

例如，您应该在哪里更新您的 html 代码:

<span id="surrounding_element">
    <div id="matched_rooms"></div>
</span>