jquery ajax 如何使用async / await

在jQuery 中，雖然本身不直接支援async/ await，但可以結合現代JavaScript 的Promise和async/await來處理非同步請求。$.ajax本質上返回的是一個Promise對象，這意味著你可以使用async/await來簡化非同步程式碼的寫法。

1. 基本用法

假設你有一個jQuery$.ajax請求，你可以將它包裝在async函數中，並使用await來等待請求完成。

範例程式碼

async function sendDataAsync() {
    try {
        let response = await $.ajax({
            url: '/YourController/YourAction',
            type: 'POST',
            data: { inputData: 'someData' },
            contentType: 'application/json'
        });
        console.log('服务器回馈信息:', response);
    } catch (error) {
        console.error('发生错误:', error);
    }
}

2. 詳細步驟

1. 定義一個async函數

你可以將AJAX 請求封裝在一個async函數中。這樣，函數在遇到await時會暫停，直到非同步操作完成後繼續執行。

2. 使用await等待AJAX​​ 請求

$.ajax回傳一個Promise，因此你可以使用await來等待它完成，並取得結果。

3. 處理錯誤

使用try/catch區塊來擷取並處理AJAX 請求中的錯誤。

3. 結合async/await和jQuery AJAX 請求

以下是一個更完整的例子，展示如何使用async/await來進行非同步的AJAX 請求，發送資料到伺服器並處理返回資料。

伺服器端程式碼（ASP.NET Core 範例）

[HttpPost]
public JsonResult YourAction(string inputData)
{
    var result = new { message = "成功接收数据: " + inputData };
    return Json(result);
}

前端程式碼（使用async/ await）

async function sendDataAsync() {
    try {
        // 发起异步的 AJAX 请求
        let response = await $.ajax({
            url: '/YourController/YourAction',  // 替换为你的 URL
            type: 'POST',
            data: JSON.stringify({ inputData: '一些数据' }),  // 发送 JSON 数据
            contentType: 'application/json',  // 指定数据类型
        });

        // 请求成功时，处理返回的结果
        console.log('服务器回馈信息:', response.message);
        alert('服务器回馈信息: ' + response.message);

    } catch (error) {
        // 处理请求中的错误
        console.error('发生错误:', error);
        alert('发生错误: ' + error.statusText);
    }
}

// 调用异步函数
sendDataAsync();

4. 處理多個非同步AJAX 請求

你也可以使用async/await來處理多個並行或串列的AJAX 請求。

串行請求（一個接一個執行）

async function sendMultipleRequests() {
    try {
        let response1 = await $.ajax({ url: '/api/request1', type: 'GET' });
        console.log('请求1完成:', response1);
        
        let response2 = await $.ajax({ url: '/api/request2', type: 'GET' });
        console.log('请求2完成:', response2);
        
    } catch (error) {
        console.error('请求失败:', error);
    }
}

並行請求（同時執行多個請求）

async function sendParallelRequests() {
    try {
        let [response1, response2] = await Promise.all([
            $.ajax({ url: '/api/request1', type: 'GET' }),
            $.ajax({ url: '/api/request2', type: 'GET' })
        ]);

        console.log('请求1和请求2同时完成:', response1, response2);
        
    } catch (error) {
        console.error('请求失败:', error);
    }
}

5. 總結

• $.ajax回傳一個Promise，你可以用async/await來處理它。
• 使用async/await可以讓程式碼更具可讀性，避免回調地獄。
• 用try/catch處理AJAX 請求中的錯誤，確保程式碼健壯。

透過使用async/ await，可以更直觀地編寫非同步程式碼，尤其在處理多個請求時，它比傳統的回呼函數方式更加簡潔清晰。

使用jQuery AJAX 發送資料後，您可以透過回呼函數取得伺服器端傳回的資料

使用jQuery AJAX 發送資料後，您可以透過回呼函數取得伺服器端傳回的資料。如果伺服器端傳回的資料包含ViewBag中的訊息，可以透過JsonResult或部分視圖的HTML 直接傳遞這些訊息。

1. 使用JsonResult返回ViewBag數據

假設在伺服器端，您在Controller中設定了ViewBag，然後將資料通過JsonResult傳回給前端。

伺服器端程式碼

[HttpPost]
public JsonResult SubmitData(string inputData)
{
    // 假设进行了一些操作，并设置了 ViewBag
    ViewBag.Message = "操作成功";
    
    // 将 ViewBag 数据放入一个匿名对象中，并通过 JSON 返回
    return Json(new { message = ViewBag.Message });
}

前端jQuery 程式碼

$.ajax({
    type: 'POST',
    url: '/YourController/SubmitData',
    data: { inputData: yourData },
    success: function(response) {
        // 这里的 response.message 就是服务器端返回的 ViewBag 数据
        console.log('服务器回馈信息: ' + response.message);
    },
    error: function(xhr, status, error) {
        console.error('发生错误: ' + error);
    }
});

2. 使用部分視圖（Partial View）傳回包含ViewBag資料的HTML

您也可以透過傳回部分視圖，將ViewBag資料嵌入到HTML 中，jQuery 可以從傳回的HTML 中提取這些資料。

伺服器端程式碼

[HttpPost]
public PartialViewResult SubmitData(string inputData)
{
    ViewBag.Message = "操作成功";
    
    // 返回部分视图，这里可以是包含 ViewBag 数据的 HTML
    return PartialView("_PartialViewName");
}

部分視圖_PartialViewName.cshtml

<div id="message">
    @ViewBag.Message
</div>

前端jQuery 程式碼

$.ajax({
    type: 'POST',
    url: '/YourController/SubmitData',
    data: { inputData: yourData },
    success: function(response) {
        // 将返回的 HTML 插入到页面的某个元素中
        $('#result').html(response);
        
        // 从返回的 HTML 中提取 ViewBag 数据
        var message = $('#result #message').text();
        console.log('服务器回馈信息: ' + message);
    },
    error: function(xhr, status, error) {
        console.error('发生错误: ' + error);
    }
});

3. 使用TempData傳遞訊息

如果您想要跨請求傳遞數據，您可以使用TempData。以下是如何透過TempData傳遞資料：

伺服器端程式碼

[HttpPost]
public IActionResult SubmitData(string inputData)
{
    TempData["Message"] = "操作成功";
    return RedirectToAction("SomeAction"); // 重定向到一个新的视图
}

public IActionResult SomeAction()
{
    ViewBag.Message = TempData["Message"];
    return View();
}

前端jQuery 程式碼

如果使用TempData，通常會在前端顯示新載入的頁面，而不直接在AJAX 回呼中取得資料。

總結

使用jQuery AJAX 發送請求後，可以透過回呼函數的response參數來取得伺服器端傳回的JsonResult資料或HTML 部分視圖。你可以透過JsonResult直接傳遞ViewBag數據，或透過部分視圖傳回包含ViewBag數據的HTML 片段。

ASP.NET Core 8 對 ScriptManager 使用的替代方案

在 ASP.NET Core 8 中，ScriptManager 和 UpdatePanel 等傳統 Web Forms 控件不再適用，因為 ASP.NET Core 採用了更現代化和靈活的方式來處理 JavaScript 和 AJAX。

以下是一些可以替代 ScriptManager 的方式來管理 JavaScript 和進行 AJAX 操作：

1. 使用 JavaScript 直接進行 AJAX 請求
使用 JavaScript（例如原生的 fetch API 或第三方庫如 jQuery）進行 AJAX 請求是非常普遍的方法。這種方法不依賴於服務端控件，可以更靈活地管理和處理客戶端行為。

使用 Fetch API 的範例

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Example with Fetch API</title>
    <script>
        async function fetchData() {
            try {
                const response = await fetch('/api/data');
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const data = await response.json();
                document.getElementById('result').textContent = JSON.stringify(data);
            } catch (error) {
                console.error('There has been a problem with your fetch operation:', error);
            }
        }
    </script>
</head>
<body>
    <button onclick="fetchData()">Fetch Data</button>
    <div id="result"></div>
</body>
</html>

使用 jQuery 的範例

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Example with jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#fetchButton").click(function() {
                $.ajax({
                    url: '/api/data',
                    method: 'GET',
                    success: function(data) {
                        $("#result").text(JSON.stringify(data));
                    },
                    error: function(error) {
                        console.error('Error fetching data:', error);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <button id="fetchButton">Fetch Data</button>
    <div id="result"></div>
</body>
</html>

2. 使用 Blazor
Blazor 是一個用於構建互動式網頁 UI 的框架，使用 C# 而不是 JavaScript。Blazor 提供了豐富的組件模型，可以在 WebAssembly 或服務端運行。

Blazor Server 範例

在您的 ASP.NET Core 8 專案中添加一個 Blazor 組件：

csharp

@page "/fetchdata"
@inject HttpClient Http

<PageTitle>Fetch Data</PageTitle>

<h3>Weather forecast</h3>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temperature (C)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
        @foreach (var forecast in forecasts)
        {
            <tr>
                <td>@forecast.Date.ToShortDateString()</td>
                <td>@forecast.TemperatureC</td>
                <td>@forecast.Summary</td>
            </tr>
        }
        </tbody>
    </table>
}

@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
    }

    public class WeatherForecast
    {
        public DateTime Date { get; set; }
        public int TemperatureC { get; set; }
        public string? Summary { get; set; }
    }
}

在 Startup.cs 中配置 Blazor 服務：

csharp

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        services.AddServerSideBlazor();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseRouting();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapBlazorHub();
            endpoints.MapFallbackToPage("/_Host");
        });
    }
}

3. 使用 Tag Helpers 和 View Components
在 ASP.NET Core 中，Tag Helpers 和 View Components 是強大而靈活的功能，允許您在 Razor 視圖中組織和重用代碼。

使用 View Component 的範例

創建一個 View Component：

csharp

public class WeatherViewComponent : ViewComponent
{
    private readonly HttpClient _httpClient;

    public WeatherViewComponent(HttpClient httpClient)
    {
        _httpClient = httpClient;
    }

    public async Task InvokeAsync()
    {
        var forecasts = await _httpClient.GetFromJsonAsync("WeatherForecast");
        return View(forecasts);
    }
}

創建對應的視圖：

在 Views/Shared/Components/Weather/Default.cshtml：

html

@model WeatherForecast[]

<h3>Weather forecast</h3>

@if (Model == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temperature (C)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
        @foreach (var forecast in Model)
        {
            <tr>
                <td>@forecast.Date.ToShortDateString()</td>
                <td>@forecast.TemperatureC</td>
                <td>@forecast.Summary</td>
            </tr>
        }
        </tbody>
    </table>
}

在 Razor 視圖中使用 View Component：

html

@await Component.InvokeAsync("Weather")

總結
在 ASP.NET Core 8 中，您可以使用以下現代化替代方案來取代 ScriptManager：

直接使用 JavaScript 和 AJAX：使用原生的 fetch API 或 jQuery 進行 AJAX 請求。
Blazor：使用 Blazor Server 或 Blazor WebAssembly 來構建互動式的單頁應用程序。
Tag Helpers 和 View Components：在 Razor 視圖中組織和重用代碼。
這些方法不僅更靈活，而且能更好地適應現代網頁開發的需求。