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