如何用JavaScript调用API Ninjas API？遇$未定义问题求助

• $是jQuery库提供的全局变量，你没在页面中引入jQuery，所以浏览器会提示“$未定义”。$.ajax是jQuery封装好的AJAX方法，不需要你自行实现，要么补引jQuery，要么用原生JavaScript方法替代。
• 你尝试的document.ajax是错误写法，原生DOM里根本没有这个方法。

方案一：引入jQuery再使用原示例代码 #

在调用AJAX的代码之前，给HTML页面添加jQuery的CDN引入：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

之后就能直接运行官网提供的示例代码。

方案二：用原生Fetch API替代（无需依赖第三方库） #

这是更轻量的方案，直接用浏览器原生支持的Fetch API改写原代码：

const city = 'london';
const apiKey = 'YOUR_API_KEY'; // 替换为你的API密钥

fetch(`https://api.api-ninjas.com/v1/geocoding?city=${city}`, {
  method: 'GET',
  headers: {
    'X-Api-Key': apiKey,
    'Content-Type': 'application/json'
  }
})
.then(response => {
  if (!response.ok) {
    throw new Error(`请求失败！状态码：${response.status}`);
  }
  return response.json();
})
.then(result => {
  console.log(result);
})
.catch(error => {
  console.error('Error:', error.message);
});

代码说明： #

• 用模板字符串拼接URL，写法更简洁
• 通过headers参数设置API密钥和内容类型，和原代码逻辑对应
• 用.then()处理成功响应，先判断请求状态是否正常，再解析JSON数据
• 用.catch()捕获请求或解析过程中的错误，替代原代码的error回调

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