表单提交时按勾选复选框触发fetch调用获取API数据的实现方法

核心需求 #

• 表单提交时，每个已勾选的复选框触发独立fetch请求，按选中项拉取对应API数据
• 基于Materialize框架开发，可选用原生JS或jQuery实现
• 选中Netflix、Amazon Prime Video这类选项时，分别请求对应平台的专属接口，把返回的影视资源数据追加渲染到页面

现有基础表单代码 #

<form id= 'selectionForm' action="#">
     <p>
        <label>
          <input type="checkbox" class="filled-in" name="Nexflix" id="Netflix" />
             <span>Netflix</span>
        </label>
      </p>
      <p>
         <label>
           <input type="checkbox" class="filled-in" name="Prime" id="Prime"/>
             <span>Amazon Prime Video</span>
         </label>
      </p> 
</form>

前置补充 #

原有表单缺少提交按钮和结果渲染容器，先补全对应结构，类名直接用Materialize内置样式即可：

<!-- 放在表单内部末尾 -->
<button type="submit" class="btn waves-effect waves-light">加载选中平台资源
  <i class="material-icons right">send</i>
</button>

<!-- 放在表单下方，用于展示返回的资源数据 -->
<div id="resultContainer" class="row"></div>

实现逻辑 #

• 监听表单提交事件，阻止默认的页面跳转行为
• 提前维护平台ID和对应API地址的映射表，后续新增平台直接修改映射表即可，不用动核心逻辑
• 遍历所有处于勾选状态的复选框，匹配映射表中的API地址发起请求
• 请求成功后把返回数据用Materialize的卡片、集合组件样式渲染到结果容器，请求失败调用Materialize内置toast提示
• 每次提交先清空上一次的渲染结果，避免旧数据残留

原生JavaScript实现 #

// 平台-API映射配置
const platformApiConfig = {
  Netflix: '/api/netflix/media',
  Prime: '/api/prime/media'
}

const selectionForm = document.getElementById('selectionForm')
const resultContainer = document.getElementById('resultContainer')

selectionForm.addEventListener('submit', async (e) => {
  e.preventDefault()
  // 清空历史结果
  resultContainer.innerHTML = ''
  // 获取所有已勾选的复选框
  const checkedOptions = selectionForm.querySelectorAll('input[type="checkbox"]:checked')

  for (const option of checkedOptions) {
    const platformKey = option.id
    const requestUrl = platformApiConfig[platformKey]
    if (!requestUrl) continue

    try {
      const response = await fetch(requestUrl)
      const mediaList = await response.json()
      // 渲染平台卡片
      const platformCard = document.createElement('div')
      platformCard.className = 'col s12 m6'
      platformCard.innerHTML = `
        <div class="card">
          <div class="card-content">
            <span class="card-title">${option.nextElementSibling.textContent}</span>
            <ul class="collection">
              ${mediaList.map(item => `<li class="collection-item">${item.name}</li>`).join('')}
            </ul>
          </div>
        </div>
      `
      resultContainer.appendChild(platformCard)
    } catch (error) {
      M.toast({html: `${option.nextElementSibling.textContent}资源加载失败`, classes: 'red'})
    }
  }
})

jQuery实现 #

// 平台-API映射配置
const platformApiConfig = {
  Netflix: '/api/netflix/media',
  Prime: '/api/prime/media'
}

$('#selectionForm').on('submit', function(e) {
  e.preventDefault()
  const $resultBox = $('#resultContainer')
  $resultBox.empty()

  $(this).find('input[type="checkbox"]:checked').each(function() {
    const $currentCheck = $(this)
    const platformKey = $currentCheck.attr('id')
    const requestUrl = platformApiConfig[platformKey]
    if (!requestUrl) return

    $.ajax({
      url: requestUrl,
      method: 'GET',
      success: function(res) {
        const cardHtml = `
          <div class="col s12 m6">
            <div class="card">
              <div class="card-content">
                <span class="card-title">${$currentCheck.next('span').text()}</span>
                <ul class="collection">
                  ${res.map(item => `<li class="collection-item">${item.name}</li>`).join('')}
                </ul>
              </div>
            </div>
          </div>
        `
        $resultBox.append(cardHtml)
      },
      error: function() {
        M.toast({html: `${$currentCheck.next('span').text()}资源加载失败`, classes: 'red'})
      }
    })
  })
})

注意事项 #

• 原表单里Netflix的name属性存在拼写错误（写为Nexflix），如果后续需要通过name属性获取表单值记得修正
• 代码里的API地址、返回数据字段要和实际业务接口对齐，当前示例假设接口返回影视条目数组，每个条目包含name字段存储影视名称
• 所有样式均采用Materialize内置类，无需额外编写CSS即可符合框架视觉规范

内容的提问来源于stack exchange，提问作者Jamlit37