Javascript 如何仅从ajax（）中追加div.done（）

我在使用以下javascript时遇到问题。按#search_room_按钮时，它将运行并用整个网站的副本替换#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>

$（函数（）{
$（“#搜索_房间_按钮”）。在（'单击'，函数（）上{
$（“#匹配的_房间”）.html（“加载”
”；
$.ajax({
url:'book.php'，
键入：“GET”，
数据：{
“rtid”：1，
'日期'：$（“#日期”）.val（），
“时间”：$（“.ui\u tpicker\u time”）.text（），
“持续时间”：4
}
}).完成（功能（数据）{
$（“#匹配的#u房间”）.html（数据“#匹配的#u房间”）；
})
})
});

试试：

$（“#匹配的#u房间”）.html（data.find（“#匹配的#u房间”）.html（））

试试：

$（“#匹配的#u房间”）.html（data.find（“#匹配的#u房间”）.html（）
我不太明白你的意思，但可能是这样的：
$（“#匹配的#u房间”）.html（$（数据）.find（“#匹配的#u房间”）

（我假设ajax请求返回的数据返回整个页面）
我不知道您的确切意思，但可能是这样的：
$（“#匹配的#u房间”）.html（$（数据）.find（“#匹配的#u房间”）

（我假设ajax请求返回的数据返回整个页面）
根据
数据的结构，这应该会有所帮助：

var newHtml = $('#matched_rooms', data);
$("#matched_rooms").html(newHtml);

您/可能/需要使用
过滤器
，具体取决于您的HTML结构
取决于
数据的结构
HTML这应该有帮助：

var newHtml = $('#matched_rooms', data);
$("#matched_rooms").html(newHtml);

您/可能/需要使用
过滤器
，具体取决于您的HTML结构
在我看来，您应该使用它而不是
。get（）
-它具有内置功能，用于将现有节点的内容替换为AJAX请求的部分内容

请注意DOM结构——jQuery希望用指定的元素本身而不是指定元素的内容替换原始元素的全部内容

您应该将您的
#匹配的
元素包装在
#容器
元素中，然后使用该元素：

<div id="container">
   <div id="matched_rooms"> ... </div>
</div>


... 

代码为：

$("#matched_rooms").html("<p>LOADING</p>");
$('#container').load('book.php #matched_rooms', { // NB: selector parameter!
    'rtid': 1,
    'date': $("#date").val(),
    'time': $(".ui_tpicker_time").text(),
    'duration': 4
});

$（“#匹配的_房间”）.html（加载
”；
$（'#container'）.load（'book.php#matched_rooms'，{//NB:selector参数！
“rtid”：1，
'日期'：$（“#日期”）.val（），
“时间”：$（“.ui\u tpicker\u time”）.text（），
“持续时间”：4
});

不需要成功处理程序-插入回DOM是自动的。
在我看来，您应该使用它而不是
。get（）
-它具有内置功能，可以用AJAX请求的部分内容替换现有节点的内容

请注意DOM结构——jQuery希望用指定的元素本身而不是指定元素的内容替换原始元素的全部内容

您应该将您的
#匹配的
元素包装在
#容器
元素中，然后使用该元素：

<div id="container">
   <div id="matched_rooms"> ... </div>
</div>


... 

代码为：

$("#matched_rooms").html("<p>LOADING</p>");
$('#container').load('book.php #matched_rooms', { // NB: selector parameter!
    'rtid': 1,
    'date': $("#date").val(),
    'time': $(".ui_tpicker_time").text(),
    'duration': 4
});

$（“#匹配的_房间”）.html（加载
”；
$（'#container'）.load（'book.php#matched_rooms'，{//NB:selector参数！
“rtid”：1，
'日期'：$（“#日期”）.val（），
“时间”：$（“.ui\u tpicker\u time”）.text（），
“持续时间”：4
});

不需要成功处理程序-插入回DOM是自动的。
我想您正在寻找

$("#matched_rooms").html($(data).find("#matched_rooms").html());

顺便说一句，这个功能还有一个（有限的）快捷方式：

$（“匹配的房间”）
.html（“加载
”）
.parent（）.load（'book.php#matched_rooms'{
“rtid”：1，
'日期'：$（“#日期”）.val（），
“时间”：$（“.ui\u tpicker\u time”）.text（），
“持续时间”：4
});
我想你在找

$("#matched_rooms").html($(data).find("#matched_rooms").html());

顺便说一句，这个功能还有一个（有限的）快捷方式：

$（“匹配的房间”）
.html（“加载
”）
.parent（）.load（'book.php#matched_rooms'{
“rtid”：1，
'日期'：$（“#日期”）.val（），
“时间”：$（“.ui\u tpicker\u time”）.text（），
“持续时间”：4
});
您可以使用而不是
$.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>


您可以使用而不是
$.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>

这是可以做到的：

get.done(function(data) { 
                var message1 = $(data).find('#message1');
                var message2 = $(data).find('#message2');
                var NewList = $(data).find('div');
                $('#error').html(message1.html());
                $('#results').html(message2.html());

*这是一个不复制和粘贴代码的示例*
这是可以做到的：

get.done(function(data) { 
                var message1 = $(data).find('#message1');
                var message2 = $(data).find('#message2');
                var NewList = $(data).find('div');
                $('#error').html(message1.html());
                $('#results').html(message2.html());

*这是一个不复制和粘贴代码的示例*
html
方法不接受2个参数。没有第二个参数？@undefined对于
undefined
，您非常聪明。您必须首先查找数据。我将很快发布一些代码。在book.php中返回所需的HTML。
HTML
方法不接受2个参数。没有第二个参数？@undefined对于
undefined
，您非常聪明。您必须首先查找数据。我将很快发布一些代码。在book.php中返回您想要的HTML。这将导致一个双重嵌套的
#matched_rooms
结构。现在您的答案看起来与我的完全相同…；-）这将导致一个双重嵌套的
#匹配的(u rooms
结构。现在你的答案看起来和我的一样…；-）与另一个答案的注释相同-这样使用
.load
将导致多个嵌套元素的
#matched_rooms
id不正确。感谢提示，现已修复。是的，只要
#matched_rooms
没有兄弟姐妹。与其他答案相同的注释-使用
.load
这样会导致多个嵌套元素的
#matched_rooms
id不正确。感谢提示，现已修复。是的，只要
#matched_rooms