如何实现点击id为testp的按钮后返回JSON格式API请求结果

点击按钮请求API功能异常修复方案 #

常见问题及对应修复代码 #

• 事件绑定失效
  如果JS代码加载时机早于DOM渲染完成，会找不到#testp元素导致点击无响应，调整事件绑定逻辑：

// 等待页面所有DOM元素渲染完成后再绑定事件
document.addEventListener('DOMContentLoaded', () => {
  const testBtn = document.querySelector('#testp');
  if (testBtn) {
    testBtn.addEventListener('click', handleRequest);
  }
})

• Fetch请求逻辑错误
  未正确处理响应流解析、异常捕获会导致拿不到JSON结果，标准异步请求写法如下：

async function handleRequest() {
  try {
    // 替换为你实际的请求地址
    const res = await fetch('https://你的API接口地址');
    // 先判断请求是否成功
    if (!res.ok) throw new Error(`请求失败，状态码：${res.status}`);
    // 解析响应为JSON格式
    const jsonData = await res.json();
    // 后续可以把jsonData输出到页面或者控制台
    console.log('请求结果：', jsonData);
  } catch (error) {
    console.error('接口调用异常：', error);
  }
}

• 表单默认提交冲突
  如果按钮放在表单标签内，点击会触发默认提交刷新页面，需要阻止默认行为：

async function handleRequest(e) {
  // 阻止默认表单提交行为
  e.preventDefault();
  // 剩余请求逻辑同上
}

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