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 片段。