javascript - 从 ajax 调用加载 html 内容

Question

我有一个 HTML 页面，它有 Ajax 调用来加载表格内容

<html>
....

<script sec:haspermission="VIEW_NOTE" th:inline='javascript'>
        require(['app/agent/viewGlobalAgent'], function (){
            var individualId= [[${model.agent.individual.id}]];
            var agentId= [[${model.agent.id}]];
            $.get("/notes/referenceTable.html?individualId="+individualId+"&agentId="+agentId, function(data){
                console.log("theData " , data);

                var noteList = $("#note-list-container2").value;
                var fileList = $("#file-list-container2").value;
                // document.getElementById("note-list-container").innerHTML = noteList;
                // document.getElementById("note-file-form").innerHTML = fileList;
                $("#note-list-container").html(noteList);
                $("#note-file-form").html(fileList);

        
        });
    </script>

....
</html>

Ajax 调用加载的 html

<div>
<div id="note-list-container2">
    ....
</div>
<div id="file-list-container2">
....
</div>
</div>

我需要在 Ajax 调用的回调中访问这两个 div

$.get("/notes/referenceTable.html?individualId="+individualId+"&agentId="+agentId, function(data){

我试图访问它们但它不起作用

$("#note-list-container2").value

在加载的 html 中访问 div 的任何方式

Answer 1

由于您希望新 html 中的内容作为data返回，因此您希望将该数据包装在$()并在该对象中进行查询

然后使用text()或html()因为value仅用于表单控件，而不是内容元素

$.get(url, function(data) {

  var $data = $(data);

  var noteList = $data.find("#note-list-container2").text();// or html()
  var fileList = $data.find("#file-list-container2").text();

  $("#note-list-container").html(noteList);
  $("#note-file-form").html(fileList);

});

Answer 2

jQuery.text() ：获取匹配元素集合中每个元素的组合文本内容，包括其后代，或者设置匹配元素的文本内容

jQuery.val() ：获取匹配元素集中第一个元素的当前值或设置每个匹配元素的值。 .val() 方法主要用于获取表单元素的值，例如 input、select 和 textarea。 当在一个空集合上调用时，它返回 undefined。

div 元素没有值....

一个例子：

 console.log('text(): ' + $("#note-list-container2").text()); console.log('val(): ' + $("#note-list-container2").val());

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="note-list-container2"> .... </div>

Answer 3

我猜你正在使用 jQuery。 HTML 内容可以通过 .html() 而不是值来访问。 div 元素上没有 value 属性。 更重要的是，您应该尝试在更新元素之后而不是之前获取元素的内容。 此外，选择器应该匹配。 从您的示例中，您似乎正在尝试获取 #note-list-container2 的内容，但您正在更新 #note-list-container 元素。 鉴于您的示例 AJAX 调用输出，这些 ID 之一是错误的。

javascript - 从 ajax 调用加载 html 内容

问题描述

3 个解决方案

解决方案1
2 已采纳 2020-09-07 21:44:09

解决方案2
1 2020-09-07 21:45:24

解决方案3
1 2020-09-07 21:48:42

javascript - 从 ajax 调用加载 html 内容

问题描述

3 个解决方案

解决方案1 2 已采纳 2020-09-07 21:44:09

解决方案2 1 2020-09-07 21:45:24

解决方案3 1 2020-09-07 21:48:42

解决方案1
2 已采纳 2020-09-07 21:44:09

解决方案2
1 2020-09-07 21:45:24

解决方案3
1 2020-09-07 21:48:42