广州阿里云代理商：AJAX天气预报前台

luotuoemo • 2023年12月29日 20:49 • 阿里云 • 阅读 711

以下是一个使用AJAX加载天气预报数据的前台页面示例：

<!DOCTYPE html>
<html>
<head>
  <title>天气预报</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <h1>天气预报</h1>

  <div id="weather"></div>

  <script>
    $(document).ready(function() {
      // 发送AJAX请求获取天气数据
      $.ajax({
        url: "http://api.weather.com/weather",
        method: "GET",
        data: {
          city: "广州"
        },
        success: function(response) {
          // 处理返回的天气数据
          var weatherData = JSON.parse(response);

          // 渲染天气信息到页面
          var weatherDiv = $("#weather");
          weatherDiv.html(
            "城市：" + weatherData.city +
            "<br>温度：" + weatherData.temperature +
            "<br>天气状况：" + weatherData.condition
          );
        },
        error: function() {
          // 处理请求失败的情况
          alert("获取天气数据失败");
        }
      });
    });
  </script>
</body>
</html>

上述代码会加载jQuery库，并在页面加载完成时发送AJAX请求获取广州的天气数据。然后，将返回的天气数据渲染到一个带有 id 为 “weather” 的 div 元素中。

请注意，由于AJAX请求是跨域的，需要确保服务器端已正确配置CORS（跨域资源共享）。另外，请求的URL和参数根据实际情况进行修改。