我想知道如何在使用 Ajax 调用更新数据后刷新模式并显示它

Question

如何在不刷新所有页面的情况下将 ajax 响应的 html 放入模式内部？

$.ajax({
  type: "Post",
  url: '@Url.Action("ModifierPM", "Mode")',
  data: data,
  contentType: false,
  processData: false,
  success: function (response) {
     
     $("#modalModifPM").modal('hide');
     // i want to show reaponse data in this Modal
     // within not refresh all the page, just the MODAL will be updated and appeared
     $("#modalTMRs").modal('show');
    }
});

Answer 1

如果您的响应来自 Parital View Result（也就是说，您的响应是 html 文本），您可以将所有响应放入模态正文；

$.ajax({
  type: "Post",
  url: '@Url.Action("ModifierPM", "Mode")',
  data: data,
  contentType: false,
  processData: false,
  success: function (response) {
       $("#modalModifPM").modal('hide');
       // this line finds the modal body in two step and puts the response data inside of it
       $("#modalTMRs").find(".modal-body").html(response);
       $("#modalTMRs").modal('show');
    }
});

正如您在注释行中看到的，有更多更好的方法可以找到模态体。 例如;

$("#modalTMRs .modal-body").html(response); // one space between parent and child

另一种方法是直接给modal body div写一个id，通过id找到； 如果您的模态 html 如下所示；

<div id="modalTMRs" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title">Modal title</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body" id="modalTMRs-modal-body">  THATS THE ID
    <p>Modal body text goes here.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>
</div>
</div>

然后你就可以一步到位；

$("#modalTMRs-modal-body").html(response);

例子可以更多..：P

如果您的响应只是 Json 列表，那么您可以将其转换为表客户端；

 var exampleJsonResult = [
    { "id":1, "name":"test1", "statu":"OK" },
    { "id":2, "name":"test2", "statu":"OK" },
    { "id":3, "name":"test3", "statu":"OK" },
 ];

结果函数可以是这样的；

 function makeTable(json) {
    let htmlTable = "<table>";
    json.forEach(item=>{
      htmlTable += "<tr>";
      htmlTable += "<td>" + item.id + "</td>";
      htmlTable += "<td>" + item.name + "</td>";
      htmlTable += "<td>" + item.statu + "</td>";
      htmlTable += "</tr>";
    });
    htmlTable += "</table>";
    return htmlTable;
 }

当您将结果数据发送到此函数时，这将为您提供一个表格。 下一步，将表格附加到您想要的任何位置，如上文所述。

在此示例中，您必须了解数据模型并按名称调用值。

如果您想制作更具弹性的制表器，则必须像这样更改响应模型；

 var exampleJsonResult2 = [
    [ 1, "test1", "OK", 234.2 ],
    [ 2, "test2", "NO", 345.6 ],
    [ 3, "test3", "OK", 456.7 ],
    [ 4, "test4", "NO", 678.9 ],
 ];

这个 json 是一个 list 的列表，由每个 item 组成一个对象列表。 优点是这种模式； 您可以通过循环进行迭代，无需知道属性名称。

 function makeTable2(json) {
    let htmlTable = "<table>";
    json.forEach(item=>{
      htmlTable += "<tr>";
      item.forEach(prop => htmlTable += "<td>" + prop + "</td>");
      htmlTable += "</tr>";
    });
    htmlTable += "</table>";
    return htmlTable;
 }

makeTable2(exampleJsonResult2) 是表格字符串！