javascript - 如何在javascript中用 "fetch"方法替换 "ajax"？

标签 javascript jquery html ajax api

现在我正在尝试将注意力集中在 ajax 上，因为它正在使用 fetch 来检索数据。 语法大致相同，但很好奇它会是什么样子。

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="searchContainer">
        <input class="searchControl" type="text" placeholder="City Name or Zipcode" id="searchInput">
        <button class="searchControl" id="searchBtn">Search</button>
    </div>
    <div id="weatherContainer">
        <div id="weatherDescription">
            <h1 id="cityHeader"></h1>
            <div id="weatherMain">
                <div id="temperature"></div>
                <div id="weatherDescriptionHeader"></div>
                <div><img id="documentIconImg"></div>
            </div>
            <hr>
            <div id="windSpeed" class="bottom-details"></div>
            <div id="humidity" class="bottom-details"></div>
        </div>
    </div>
    <script src="script.js" ></script>
</body>

这是我想从使用 fetch 方法转换为使用 AJAX 调用来代替它的 JavaScript。

---
let appId = 'b1e22f9b3891a9a6fc389e3e1a4cc496';
let units = 'imperial'; 
let searchMethod; 

function getSearchMethod(searchTerm) {
    if(searchTerm.length === 5 && Number.parseInt(searchTerm) + '' === searchTerm)
        searchMethod = 'zip';
    else 
        searchMethod = 'q';
}

function searchWeather(searchTerm) {
    getSearchMethod(searchTerm);
    fetch(`http://api.openweathermap.org/data/2.5/weather?${searchMethod}=${searchTerm}&APPID=${appId}&units=${units}`)
        .then((result) => {
            return result.json();
        }).then((res) => {
            init(res);
    });
}

function init(resultFromServer) {
    switch (resultFromServer.weather[0].main) {
        case 'Clear':
            document.body.style.backgroundImage = "url('clear.jpg')";
            break;

        case 'Clouds':
            document.body.style.backgroundImage = "url('cloudy.jpg')";
            break;

        case 'Rain':
        case 'Drizzle':
        case 'Mist':
            document.body.style.backgroundImage = "url('rain.jpg')";
            break;

        case 'Thunderstorm':
            document.body.style.backgroundImage = "url('storm.jpg')";
            break;

        case 'Snow':
            document.body.style.backgroundImage = "url('snow.jpg')";
            break;

        default:
            break;
    }

    let weatherDescriptionHeader = document.getElementById('weatherDescriptionHeader');
    let temperatureElement = document.getElementById('temperature');
    let humidityElement = document.getElementById('humidity');
    let windSpeedElement = document.getElementById('windSpeed');
    let cityHeader = document.getElementById('cityHeader');

    let weatherIcon = document.getElementById('documentIconImg');
    weatherIcon.src = 'http://openweathermap.org/img/w/' + resultFromServer.weather[0].icon + '.png';

    let resultDescription = resultFromServer.weather[0].description;
    weatherDescriptionHeader.innerText = resultDescription.charAt(0).toUpperCase() + resultDescription.slice(1);
    temperatureElement.innerHTML = Math.floor(resultFromServer.main.temp) + '&#176;';
    windSpeedElement.innerHTML = 'Winds at  ' + Math.floor(resultFromServer.wind.speed) + ' m/s';
    cityHeader.innerHTML = resultFromServer.name;
    humidityElement.innerHTML = 'Humidity levels at ' + resultFromServer.main.humidity +  '%';

    setPositionForWeatherInfo();
}

function setPositionForWeatherInfo() {
    let weatherContainer = document.getElementById('weatherContainer');
    let weatherContainerHeight = weatherContainer.clientHeight;
    let weatherContainerWidth = weatherContainer.clientWidth;

    weatherContainer.style.left = `calc(50% - ${weatherContainerWidth/2}px)`;
    weatherContainer.style.top = `calc(50% - ${weatherContainerHeight/1.3}px)`;
    weatherContainer.style.visibility = 'visible';
}

document.getElementById('searchBtn').addEventListener('click', () => {
    let searchTerm = document.getElementById('searchInput').value;
    if(searchTerm)
        searchWeather(searchTerm);
});
---

如果有人有任何想法或知道 100% 有效的解决方案，请随时分享。不确定该怎么做。

最佳答案

编辑: 这个答案是错误的还是什么？？不确定为什么要投票？嘘……

fetch 和 $.ajax 是到达同一目的地的不同路径。它们都松散地表现得像XMLHttpRequest ..

我建议坚持使用 fetch，因为 默认情况下 广泛支持它，比 XMLHttpRequest 更易于使用>，并且不需要任何第三方库。要使用 $.ajax，(据我所知)您必须导入 jQuery - 它会与 $.ajax< 一起导入很多不必要的代码。如果您可以在没有第三方库的情况下做事，那么您应该这样做。

话虽这么说，使用 $.ajax 看起来像这样:

特殊功能:

function searchWeather(searchTerm) {
  getSearchMethod(searchTerm);
  $.ajax({
    url: `https://api.openweathermap.org/data/2.5/weather?${searchMethod}=${searchTerm}&APPID=${appId}&units=${units}`,
    success: (data) => {
      init(data);
    },
    failure: (err) => {
      console.log("ERROR!", err);
    }
  });
}

演示:

let appId = "b1e22f9b3891a9a6fc389e3e1a4cc496";
let units = "imperial";
let searchMethod;

function getSearchMethod(searchTerm) {
  if (searchTerm.length === 5 && Number.parseInt(searchTerm) + "" === searchTerm)
    searchMethod = "zip";
  else searchMethod = "q";
}

function searchWeather(searchTerm) {
  getSearchMethod(searchTerm);
  $.ajax({
    url: `https://api.openweathermap.org/data/2.5/weather?${searchMethod}=${searchTerm}&APPID=${appId}&units=${units}`,
    success: (data) => {
      init(data);
    },
    failure: (err) => {
      console.log("ERROR!", err);
    }
  })
    /*
    fetch(`https://api.openweathermap.org/data/2.5/weather?${searchMethod}=${searchTerm}&APPID=${appId}&units=${units}`)
    .then(result => {
      return result.json();
    })
    .then(res => {
      init(res);
    });
    */
}

function init(resultFromServer) {
  switch (resultFromServer.weather[0].main) {
    case "Clear":
      document.body.style.backgroundImage = "url('clear.jpg')";
      break;

    case "Clouds":
      document.body.style.backgroundImage = "url('cloudy.jpg')";
      break;

    case "Rain":
    case "Drizzle":
    case "Mist":
      document.body.style.backgroundImage = "url('rain.jpg')";
      break;

    case "Thunderstorm":
      document.body.style.backgroundImage = "url('storm.jpg')";
      break;

    case "Snow":
      document.body.style.backgroundImage = "url('snow.jpg')";
      break;

    default:
      break;
  }

  let weatherDescriptionHeader = document.getElementById(
    "weatherDescriptionHeader"
  );
  let temperatureElement = document.getElementById("temperature");
  let humidityElement = document.getElementById("humidity");
  let windSpeedElement = document.getElementById("windSpeed");
  let cityHeader = document.getElementById("cityHeader");

  let weatherIcon = document.getElementById("documentIconImg");
  weatherIcon.src =
    "http://openweathermap.org/img/w/" +
    resultFromServer.weather[0].icon +
    ".png";

  let resultDescription = resultFromServer.weather[0].description;
  weatherDescriptionHeader.innerText =
    resultDescription.charAt(0).toUpperCase() + resultDescription.slice(1);
  temperatureElement.innerHTML =
    Math.floor(resultFromServer.main.temp) + "&#176;";
  windSpeedElement.innerHTML =
    "Winds at  " + Math.floor(resultFromServer.wind.speed) + " m/s";
  cityHeader.innerHTML = resultFromServer.name;
  humidityElement.innerHTML =
    "Humidity levels at " + resultFromServer.main.humidity + "%";

  setPositionForWeatherInfo();
}

function setPositionForWeatherInfo() {
  let weatherContainer = document.getElementById("weatherContainer");
  let weatherContainerHeight = weatherContainer.clientHeight;
  let weatherContainerWidth = weatherContainer.clientWidth;

  weatherContainer.style.left = `calc(50% - ${weatherContainerWidth / 2}px)`;
  weatherContainer.style.top = `calc(50% - ${weatherContainerHeight / 1.3}px)`;
  weatherContainer.style.visibility = "visible";
}

document.getElementById("searchBtn").addEventListener("click", () => {
  let searchTerm = document.getElementById("searchInput").value;
  if (searchTerm) searchWeather(searchTerm);
});
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="searchContainer">
    <input class="searchControl" type="text" placeholder="City Name or Zipcode" id="searchInput">
    <button class="searchControl" id="searchBtn">Search</button>
  </div>
  <div id="weatherContainer">
    <div id="weatherDescription">
      <h1 id="cityHeader"></h1>
      <div id="weatherMain">
        <div id="temperature"></div>
        <div id="weatherDescriptionHeader"></div>
        <div><img id="documentIconImg"></div>
      </div>
      <hr>
      <div id="windSpeed" class="bottom-details"></div>
      <div id="humidity" class="bottom-details"></div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

关于javascript - 如何在javascript中用 "fetch"方法替换 "ajax"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59463417/

上一篇：javascript - 如何使用 jquery 从 div 获取 3 行

下一篇：javascript - 如何在 react 中访问多维数组

相关文章：

javascript - 寻找姐妹元素

javascript - 在函数中返回 json 结果

javascript - onmousemove 事件未触发

javascript - Cakephp 中的可重复子表单

javascript - 按 Enter 键提交登录信息

javascript - 如何在动态元素上添加事件监听器？

javascript - 如何格式化JSON日期？

javascript - jQuery Mobile 中的自定义图标使用自定义主题失败

html - 在图像顶部设置 div 样式时出现问题 (css)

html - Errno::ENOENT 在帖子#index

©2024 IT工具网  联系我们