首页 > 解决方案 > javascript - 从 ajax 调用加载 html 内容

问题描述

我的 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 的任何方式

标签: javascripthtml

解决方案


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

然后使用text()orhtml()因为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);

});

推荐阅读