【jQuery】如何使用 ajax 和後端 server 進行資料的 request, response

tags: Javascript jQuery

parameter 參數

常用參數

• url (String)
  • 指定要進行呼叫的後端位址
  • 可以為絕對位址、相對位址
• type (String)
  • 請求方式，POST/GET
  • 通常用 POST
• dataType (String)
  • Server傳回的資料類型
  • 預設：HTTP MIME Type
  • 格式
    • xml、script、json、text
    • html：傳回HTML，含script tags。
    • jsonp：JSONP 格式。在URL加上?callback=?參數，並在Server端配合送回此jsonp callback
  • 通常用 json
• cache (Boolean)
  • 是否暫存此頁面
• data (Map)
  • 傳送至Server的資料，格式為Key/Value
  • 例如：{ id: $("#account").val(), pwd: $("#password").val() }
• success
  • 請求成功時，執行的方法，通常用於接收server回傳的資料
  • 例如：

    success: function(response) {
                console.log(response);
            }
    

其他參數

• async (Boolean)
  • 是否與其他code同步執行，預設為 true
  • 通常不建議 false，去等待 ajax 的結果回傳後，再繼續執行其他code。因為會影響整體code效能。
• error
  • 請求失敗時，執行的方法
• complete
  • 請求完成時，執行的方法
  • 不論 success、error 都會執行
• contentType
  • 傳送至Server的資料格式
  • 預設：application/x-www-form-urlencoded，通常預設適用大部分的情況
  • 例如：application/json; charset=UTF-8
• 官方文件：http://api.jquery.com/jquery.ajax/
• w3schools：https://www.w3schools.com/jquery/ajax_ajax.asp

Example

• Link：https://github.com/SpicyBoyd/side_project/blob/master/ajax.js

function login() {
    // 接收前端的input資料：帳號、密碼
    var data = { id: $("#account").val(), pwd: $("#password").val() };
    $.ajax({
        url: "/cgi-bin/auth",   //後端的URL
        type: "POST",   //用POST的方式
        dataType: "json",   //response的資料格式
        cache: false,   //是否暫存
        data: data, //傳送給後端的資料
        success: function(response) {
            console.log(response);  //成功後回傳的資料

            if (response.auth === 1) {
                window.location.href = "camera.html";   //帳密確認成功後，轉址
            } else {
                $("#invalid").show();   //帳密輸入錯誤，訊息框
                centered($("#invalid"));

                $(window).resize(function() {
                    centered($("#invalid"));
                });

                setTimeout(function() {
                    $("#invalid").hide();
                }, 3000);
            }
        }
    });
}

延伸閱讀：JSONP

• 常用來取得跨網域資料

1. 用 jQuery 以 JSONP 方式取得跨網域資料：Link
2. Cross Domain Ajax 跨網域抓取資料(JSONP)：Link

Reference 參考資料

1. JQuery中Ajax參數用法：
   http://awpluway.pixnet.net/blog/post/364195038-jquery中ajax參數用法
2. 官方文件：http://api.jquery.com/jquery.ajax/
3. jquery中的ajax的基礎運用。提供範例程式下載
   http://expect7.pixnet.net/blog/post/37919326-[程式][jquery]-jquery中的ajax的基礎運用。提供範
4. w3schools：https://www.w3schools.com/jquery/ajax_ajax.asp
5. w3school 中文：http://www.w3school.com.cn/jquery/ajax_ajax.asp
6. 圖片：https://www.youtube.com/watch?v=A8NVke-9AJU