请求协助将调用DOAJ API的jQuery getJSON()代码改写为原生JavaScript实现

嘿，我明白你现在的处境——刚接触原生JS，要把依赖jQuery的代码转成纯原生，卡在$.getJSON这一步确实有点懵。别担心，我来帮你把这部分换成原生代码，一步步解释清楚：

修改后的完整代码片段 #

function $(x) { return document.getElementById(x); }
function formFunction() {
  var issn = $("issn").value;
  // 替换原来的$.getJSON部分
  fetch('https://doaj.org/api/v1/search/journals/issn%3A' + issn)
    .then(response => {
      // 先检查请求是否成功（HTTP状态码200-299区间）
      if (!response.ok) {
        throw new Error(`请求失败，状态码：${response.status}`);
      }
      // 将响应内容解析为JSON格式
      return response.json();
    })
    .then(data => {
      if(data.total === 0) {
        // 这里写期刊不在DOAJ中的逻辑
        console.log("该期刊未收录在DOAJ开放获取目录中");
        // 比如给用户显示提示信息、修改页面元素内容等
      } else {
        // 期刊存在时的逻辑
        console.log("该期刊属于DOAJ开放获取目录");
        // 可以从data.results数组里提取期刊的详细信息，比如名称、出版商等
      }
    })
    .catch(error => {
      // 处理请求过程中的错误，比如网络故障、API报错
      console.error("请求出现问题：", error);
      // 可以给用户显示友好的错误提示，比如"网络连接失败，请稍后重试"
    });
}

代码细节解释 #

• fetch()：这是浏览器原生的网络请求API，和jQuery的$.getJSON作用类似，但它返回一个Promise对象，我们用.then()来依次处理响应和数据。
• 第一个.then()：先验证响应是否成功，避免拿到无效的返回内容；如果没问题，就把响应解析成JSON格式的对象，方便后续处理。
• 第二个.then()：拿到解析后的data，就可以和原来的逻辑一样，通过data.total判断期刊是否在DOAJ中，执行对应的操作。
• .catch()：专门捕获请求过程中出现的各种错误，比如网络断开、API返回错误状态码等，避免页面崩溃，还能给用户反馈问题。

关于DOAJ v2 API的补充 #

你提到DOAJ已经更新到v2版本，目前v1的API可能还能正常使用，但如果之后遇到v1失效的情况，可以切换到v2的API，参数格式会有点变化：

// DOAJ v2 API的请求写法
fetch(`https://doaj.org/api/v2/search/journals?q=issn:${issn}`)
  .then(response => {
    if (!response.ok) throw new Error(`请求失败：${response.status}`);
    return response.json();
  })
  .then(data => {
    // v2的返回结构里，总数量是data.hits.total
    if(data.hits.total === 0) {
      // 期刊不存在的逻辑
    } else {
      // 期刊存在的逻辑，详细数据在data.hits.hits数组里
    }
  })
  .catch(error => console.error("请求错误：", error));

这样替换后，就能完全摆脱jQuery，用原生JS实现你需要的功能啦。如果还有其他小问题，随时调整就行~

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