使用Ajax时如何追加数据？点击按钮通过Ajax加载模态框咨询

嘿，针对你提出的两个Ajax技术问题，结合你给出的代码片段，我直接给你落地的解决方案：

1. 使用Ajax实现数据追加 #

数据追加的核心是避免覆盖原有内容，jQuery提供的append()方法正好能满足需求——它会把新内容添加到目标容器的末尾，而不是替换掉原有内容。

两种常见场景的实现： #

• 场景1：后端返回HTML片段
  如果后端直接返回可以渲染的HTML（比如列表项、卡片），直接调用append()即可：

  $.ajax({
      type: "Get",
      url: "/api/CompanyProfilsApi/GetNewCompanies/",
      success: function(newItemsHtml) {
          // 把新的HTML片段追加到列表容器
          $('#company-list-container').append(newItemsHtml);
      }
  });
  

• 场景2：后端返回JSON数据
  如果后端返回的是JSON格式的数据，需要先把数据拼接成HTML结构，再追加：

  $.ajax({
      type: "Get",
      url: "/api/CompanyProfilsApi/GetNewCompanies/",
      success: function(companies) {
          let newItems = '';
          // 遍历JSON数据拼接HTML
          companies.forEach(company => {
              newItems += `<div class="company-card">
                              <h3>${company.Name}</h3>
                              <p>${company.Address}</p>
                          </div>`;
          });
          // 追加到容器
          $('#company-list-container').append(newItems);
      }
  });
  

2. 点击按钮通过Ajax加载并添加模态框 #

从你的代码来看，后端已经能返回模态框的Partial视图内容了，只需要在Ajax的success回调里完成添加DOM+显示模态框的操作即可，这里以Bootstrap模态框为例（最常用的模态框组件）：

完整前端代码实现： #

// 给触发按钮绑定点击事件
$('#open-create-modal-btn').click(function() {
    $.ajax({
        type: "Get",
        data: { path: common },
        url: commonapi + "/api/CompanyProfilsApi/CreateCompanyPartial/",
        success: function(data) {
            console.log(data); // 这里的data就是后端返回的模态框HTML
            
            // 1. 将模态框HTML追加到页面（推荐追加到body，避免嵌套问题）
            $('body').append(data);
            
            // 2. 初始化并显示模态框
            const $modal = $('#company-create-modal'); // 这里的ID要和Partial视图里的模态框ID一致
            $modal.modal('show');
            
            // 可选但重要：模态框关闭后从DOM移除，避免重复添加同一模态框
            $modal.on('hidden.bs.modal', function() {
                $(this).remove();
            });
        },
        error: function(xhr, status, error) {
            console.error('加载模态框失败:', error);
            alert('加载弹窗失败，请重试');
        }
    });
});

注意事项： #

• 你的后端Partial视图需要包含标准的Bootstrap模态框结构，比如：

  <div class="modal fade" id="company-create-modal" tabindex="-1" aria-labelledby="modal-title" aria-hidden="true">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title" id="modal-title">创建新公司</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                  <!-- 这里放表单内容 -->
                  <form id="company-create-form">
                      <div class="mb-3">
                          <label for="company-name" class="form-label">公司名称</label>
                          <input type="text" class="form-control" id="company-name" name="Name">
                      </div>
                      <!-- 其他表单字段 -->
                  </form>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                  <button type="submit" class="btn btn-primary" form="company-create-form">创建</button>
              </div>
          </div>
      </div>
  </div>
  

• 如果你的模态框不是Bootstrap的，只需要替换显示/隐藏的逻辑即可，比如自定义模态框的话，添加DOM后给模态框添加active类来显示。

内容的提问来源于stack exchange，提问作者Bilal Tüylü