动态更新天气组件：无需刷新页面的实现方案

<?php

namespace App\Http\Controllers;

use Illuminate\Support\Facades\Http;

class FrontController extends Controller
{
    public function index()
    {
        if (auth()->user()) {
            $cityName = auth()->user()->city;
            $apiKey = config('services.api.key');

            // 获取天气数据
            $weatherResponse = Http::get("YOUR_WEATHER_API_ENDPOINT?city={$cityName}&key={$apiKey}");

            return view('front.index', [
                'weatherResponse' => $weatherResponse->json(),
            ]);
        } else {
            return view('front.index');
        }
    }

    public function getWeather(string $city)
    {
        $apiKey = config('services.api.key');

        // 获取天气数据
        $weatherResponse = Http::get("YOUR_WEATHER_API_ENDPOINT?city={$city}&key={$apiKey}");

        return response()->json($weatherResponse->json());
    }
}

@guest
    <h1>login/register to show your city weather</h1>
@else
    <h1>Weather in {{ $weatherResponse['city'] }}</h1>
    <x-weather :weatherResponse="$weatherResponse" />

    <div>
        <label for="city">Enter City:</label>
        <input type="text" id="city" name="city">
        <button id="getWeatherButton">Get Weather</button>
    </div>

    <div id="weather-container">
        <!-- 天气组件将在此处动态更新 -->
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#getWeatherButton').click(function() {
                var city = $('#city').val();

                $.ajax({
                    url: '/weather/' + city, // 定义路由
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        // 清空原内容
                        $('#weather-container').empty();

                        // 创建并添加新的天气组件
                        // 注意: 这里需要根据你的 x-weather 组件的结构来构建 HTML
                        var weatherComponent = `<h1>Weather in ${data.city}</h1>`;
                        //  构建你的组件，例如：
                        // weatherComponent += `<p>Temperature: ${data.temperature}</p>`;

                        $('#weather-container').append(weatherComponent);
                    },
                    error: function(xhr, status, error) {
                        console.error("Error fetching weather:", error);
                        alert("Failed to fetch weather data.");
                    }
                });
            });
        });
    </script>
@endguest

Route::get('/weather/{city}', [FrontController::class, 'getWeather']);