Question

我想将新内容从服务器加载到DIV而不刷新整个页面。我尝试了以下

$.ajax({
    type: "GET",
    url: "http://127.0.0.1:8000/result/?age="+ ageData +"&occasion="+ 
       occasionData     +"&relationship="+ forData +"#",
    success: function (response) {
        $("#testDIV").html(response);
    }
});

但问题是整个页面正在加载<DIV id="testDIV">。我想用服务器返回的新DIV内容替换旧的DIV，而不是整页。

Answer 1

你可以保持同样的过程意识，你有兴趣直接使用AJAX并想要管理你的完成功能（而不是成功，因为.done() will replace it）。这是如何......

   .done(function(data) {
    ...
    }

在完成该功能的内部，您可以根据需要过滤页面内容。只需要像这样请求jquery过滤你想要的东西......

var $response = $(data);
var response_title = $response.filter(".title").html(); //I'm assuming you are trying to pull just the title (perhaps an < h1 > tag, in this little example, from the entire external page!

THEN！...

$("#testDIV").html(response_title);

使用完成功能，基于jQuery's API，您可以使用此格式...

$.ajax({
type: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});

所以你的最终代码可能看起来像这样......

$.ajax({
    type: "GET",
    url: "ht.tp://127.0.0.1:8000/result/?age="+ ageData +"&occasion="+  occasionData     +"&relationship="+ forData +"#"})
    .done(function(response) {
    var $response = $(response);
    var response_title = $response.filter(".title").html(); 
    $("#testDIV").html(response_title);
    });

Answer 2

$(function(){
    $('.classloader.').on('click', function(e){

        $.ajax({
            type: "GET",
            url: "http://127.0.0.1:8000/result/?age="+ ageData +"&occasion="+ 
   occasionData +"&relationship="+ forData +"#",
            beforeSend:  function() {
                $("#testDIV").hide();
                $('div#loading').show();
            },
            success: function(html){
                $("#testDIV").html($(html).filter("#mainContent").html()).show();
                $('div#loading').hide();
            }
        });     
        return false;
    });
})

Answer 3

我喜欢blackhawk的回答。它使用现有代码稍作修改。

我只是将它浓缩为一行改变：

$.ajax({
     type: "GET",
     url: "http://127.0.0.1:8000/result/?age="+ ageData +"&occasion="+ 
     occasionData+"&relationship="+ forData +"#",
     success: function (response) {
         $("testDIV").html($(data).filter(".title").html());
     }
});

Answer 4

您显示的代码实际上是正确的。问题来自您的服务器提供的内容。

您在这里所做的是通过AJAX调用获取整页，并将 One div 的内容替换为整页。

您的服务器不应呈现该调用的整个页面，而只应呈现您要替换的div的内容。如果您使用的是rails或symfony等框架，它们通常会提供一种简单的方法来检测查询是正常的GET请求还是AJAX调用。

基本上，您可以使用4种策略：

向仅用于ajax调用的特定端点发出请求，并返回要替换的div的内容。而不是整个页面。
将请求发送到同一页面，并检测请求是正常的HTTP请求还是AJAX调用。基于此，返回整个页面或只返回div的内容。您可能需要在框架/工具箱文档中查找帮助程序。
发出AJAX请求，但要求提供JSON对象。在客户端以HTML格式转换您的JSON以替换div的内容。这是＆＃34;我的应用只是一个API＆＃34;做法。这是我个人的最爱，因为这个JSON端点可以用于其他目的（例如：移动应用程序），因为它只包含内容，而不是表示。由于计算的重要部分是在客户端完成的，因此这在性能方面也往往是最快的方式。另外，这需要你写更多JS。
始终呈现整个页面，并仅过滤客户端所需的内容。这是balchawk方法。好处是您不必修改服务器，但是当只需要一个子集时，您将通过返回整页来浪费处理时间和带宽。

如何在不刷新的情况下将新内容加载到DIV

4 个答案: