1

我想在不刷新整个页面的情况下将新内容从服务器加载到 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。

4

4 回答 4

1

您可以保持对直接使用 AJAX 感兴趣并希望管理完成功能（而不是成功，因为.done() 将替换它）的相同过程感。这是如何...

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

在该 done 函数中，您可以将页面内容过滤为您想要的内容。只需像这样请求您要使用 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!

然后！...

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

使用 done 函数，基于jQuery 的 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);
    });
于 2013-03-19T14:20:16.780 回答
0 
$(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;
    });
})
于 2013-03-19T14:25:05.140 回答
0

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

我会把它浓缩成这样的一行更改：

$.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());
     }
});
于 2013-03-19T14:27:30.127 回答
0

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

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

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

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

  1. 向仅用于 ajax 调用并返回您希望替换的 div 内容的特定端点发出请求。而不是整个页面。
  2. 向同一页面发出请求，并检测该请求是正常的 HTTP 请求还是 AJAX 调用。基于此，返回整个页面或仅返回 div 的内容。您可能必须在您的框架/工具箱文档中寻找帮助程序。
  3. 发出 AJAX 请求，但请求一个 JSON 对象。在客户端将您的 JSON 转换为 HTML 以替换 div 的内容。这是“我的应用程序只是一个 API”的方法。这是我个人最喜欢的，因为这个 JSON 端点可以用于其他目的（例如：移动应用程序），因为它只承载内容，而不是演示。就性能而言，这也往往是最快的方式，因为很大一部分计算是在客户端完成的。另一方面，这需要你编写更多的 JS。
  4. 始终呈现整个页面，并仅在客户端过滤您需要的内容。这是balchawk方法。好处是您不必修改您的服务器，但是当您只需要一个子集时，您会返回整个页面来浪费处理时间和带宽。
于 2013-03-19T14:32:45.967 回答