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

Question

我有两个 View 由一个 Controller 处理。

查看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 执行其操作时，它仅从 View B 中的“mydom”DOM 获取数据，并将其加载到“landingzone”中。然而，它实际上加载了从“mydom”开始的所有内容，因此它也加载了“nodom2”。

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

Answer 1

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

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

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

就您而言，您的选择器应该只是 #mydom 而不是 #mydom > *。

如果您想让服务器仅返回目标 html 而不是全部，则必须修改服务器脚本以使其仅返回目标 html。 jquery/javascript 无法做到这一点。