AJAX+JS+HTML获取温尼伯除雪计划JSON数据运行异常如何排查？

错误列表 #

• 自定义函数名与浏览器原生API冲突：你定义的请求函数命名为fetch，和浏览器内置的网络请求APIwindow.fetch重名，函数调用时会触发无限递归，无法发起真实网络请求。
• 未阻止表单默认提交行为：搜索按钮为表单submit类型，点击后会触发表单默认提交、页面刷新，JS逻辑会被直接中断。
• API请求地址格式错误：资源路径和查询参数之间缺少?分隔符，导致请求地址不符合规范，无法正确返回数据。
• DOM操作方法拼写错误：document.getElementByTagName为错误写法，正确API是复数形式document.getElementsByTagName。
• 缺少历史数据清空逻辑：每次发起新搜索前没有清空表格原有内容，多次搜索结果会叠加展示。

修复后的完整JS代码 #

// 重命名函数，避免和原生fetch冲突
function fetchPlowData(e) {
    // 阻止表单默认提交刷新行为
    e.preventDefault();
    let commonName = document.getElementById("common-name").value.toLowerCase();
    // 路径后加?分隔查询参数
    const apiUrl = 'https://data.winnipeg.ca/resource/tix9-r5tc.json?' +
                `$where=common_name LIKE '%${commonName}%'` +
                '&$order=shift_start DESC' +
                '&$limit=100';
    const encodedURL = encodeURI(apiUrl);

    fetch(encodedURL)
    .then(function(result) {
      return result.json();
    })
    .then(function(data) {
        // 修正拼写错误
        let body = document.getElementsByTagName("tbody")[0];
        // 清空之前的表格内容
        body.innerHTML = '';
        let headingRows = document.createElement("tr");
        body.appendChild(headingRows);

        let nameHead = document.createElement("th");
        nameHead.innerHTML = 'Zone';
        headingRows.appendChild(nameHead);

        let startHead = document.createElement("th");
        startHead.innerHTML = 'Shift Start';
        headingRows.appendChild(startHead);

        let endHead = document.createElement("th");
        endHead.innerHTML = 'Shift End';
        headingRows.appendChild(endHead);

        for (let i = 0; i< data.length; i++) {
            let createRows = document.createElement("tr");
            body.appendChild(createRows);

            let createName = document.createElement("td");
            createName.innerHTML = data[i].plow_zone;
            createRows.appendChild(createName);

            let createStart = document.createElement("td");
            createStart.innerHTML = data[i].shift_start;
            createRows.appendChild(createStart);

            let createEnd = document.createElement("td");
            createEnd.innerHTML = data[i].shift_end;
            createRows.appendChild(createEnd);
       } 
    })
    // 新增错误捕获，方便后续排查问题
    .catch(function(err) {
        console.error('请求出错：', err);
    });
}

function load(){
    // 改成监听表单submit事件，比单独监听按钮点击更稳妥
    document.getElementById("searchform").addEventListener("submit", fetchPlowData);
}
document.addEventListener("DOMContentLoaded", load);

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