Question

我有两个视图由一个控制器处理。

查看A -

<div id="landingzone" style="width:500; height:300;">

</div>

<script type="text/javascript">
  $.ajaxSetup ({
    cache: false
  });
  var ajax_load = "<img class='loading' src='/images/load.gif' alt='loading...' width='40px' />";

//  load() functions

  $("#show").click(function() {
    var loadUrl = "/reports/ref_table_template/"
    loadUrl = loadUrl + $('#lender option:selected').val();
    $("#landingzone").html(ajax_load).load( loadUrl + " #mydom > *" );
    });
</script>

查看B -

<div style="position: relative; align: float-right;" id="nodom1">
  Nothing here should matter!  I should be able to write profanities and not see them.
</div>

<div id="mydom" style="position: relative; align: float-left;">
  This text should render.
</div>

<div id="nodom2">
  This should also not render.
</div>

我对我所做的研究的期望是，当Ajax做它的事情时，它只需要来自视图B中“mydom”DOM的数据，并将其加载到“landingzone”中。然而，它实际上从“mydom”向下加载所有内容 - 所以它也加载“nodom2”。

这是典型的Ajax行为吗？如果是这样 - 为什么这样做？有办法解决这个问题吗？

Answer 1

因为获取该页面的唯一方法是将其加载到内存中并进行查询。

如果您不希望获取所有内容，请使服务器仅返回您想要的数据。

Answer 2

是的，这是典型的。这就是jquery在内部所做的事情：

$.ajax({
    url: "/reports/ref_table_template/",
    success: function(responsestring){
        theelement.html($("<div />").html(responsestring).find("#mydom > *"));
    }
})

它加载目标页面，然后由选择器过滤它并将其设置为所选元素的内容。

在您的情况下，您的选择器应该只是#mydom而不是#mydom > *。

如果您希望服务器仅返回目标html而不是全部，则必须修改serverscript以使其仅返回目标html。没有什么jquery / javascript可以做到这一点。

这是典型的Ajax行为吗？如果是这样，为什么？

2 个答案: