前端網頁傳值給後端伺服器的幾種方式

這些知識不難，也常常使用到
但沒有做一個統整
因此今天來總結一下

HTML

不用寫任何程式就能實現
簡單的 <a> 標籤

<a href="url?paramA=valueA&paramB=valueB" rel="external nofollow" >click</a>

以及 <form> 標籤表單提交

<form action="url" method="post" >
    <input type="text" placeholder="paramA" name="paramA">
    <input type="text" placeholder="paramB" name="paramB">
    <input type="submit" value="submit">
</form>

但基本上傳的資料不可能寫死
甚至往往需要經過修改後才傳
這時候就需要 JavaScript 處理

JavaScript

JavaScript 一樣能做到跳轉效果

window.location.href = "url?paramA=valueA&paramB=valueB";

甚至還能提交隱藏表單

function submit(url, params, type="post") {
    const form = document.createElement("form");
    form.method = type;
    form.action = url;

    for (const key in params) {
        if (params.hasOwnProperty(key)) {
            const field = document.createElement("input");
            field.type = "hidden";
            field.name = key;
            field.value = params[key];
            form.appendChild(field);
        }
    }

    document.body.appendChild(form);
    form.submit();
}

//call
submit("url", { paramA : "valueA", paramB : "valueB" });

不過以上四種方法都會回傳一個全新的頁面
就算是回傳原本的頁面也會看到閃爍
為了避免轉址要使用非同步技術

不同步 Asynchronous

透過 XMLHttpRequest 物件
發起 get 請求
然後以 callback function 執行後續動作

var xhr = new XMLHttpRequest();
xhr.open("GET", "url?paramA=valueA&paramB=valueB");
xhr.send(null);

//callback
xhr.onload = function () {
    alert(xhr.responseText);
};

post 請求

var xhr = new XMLHttpRequest();
xhr.open("post", "url");
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("paramA=valueA&paramB=valueB");

傳送 json 資料

var params = { paramA : "valueA", 
               paramB : "valueB" };

var xhr = new XMLHttpRequest();
xhr.open("post", "url");
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(JSON.stringify(params));

原生 JavaScript 的寫法稍嫌冗長
使用 jQuery 套件較為輕鬆

jQuery 函式庫

jQuery 也有 get 與 post
但是因為等效於 ajax
就不再多做介紹

$.ajax({
    type: "GET",
    url: "url",
    dataType: "text",
    data: {
        paramA: "valueA",
        paramB: "valueB"
    },
    success: function(responseText) {
        alert(responseText);
    },
    error: function() {
        alert("error");
    },
    complete: function() {
        alert("complete");
    }
});

參數	說明	值
type	請求類型	POST / GET (default)
url	請求位置
dataType	回傳的資料類型 (from Server)	xml、html、script、json、jsonp、text
data	傳遞的資料	key:value, key:value, …
contentType	傳遞的資料型態 (to Server)	“application/x-www-form-urlencoded; charset=UTF-8″：default “application/json; charset=utf-8″：json
async	同步或非同步	true / false
success	請求成功執行的函式	function
error	請求失敗執行的函式	function
complete	請求完成（不論成功與否）執行的函式	function

結論

從以上介紹可以看到歷史演進的過程
新技術的出現就是為了彌補舊技術的不足
但只要能滿足業務需求
又不需要大費周章
就是合適的方式

方式	技術	類型	非同步
超連結	HTML	get	✘
表單	HTML	get、post	✘
跳轉	JavaScript	get	✘
隱藏表單	JavaScript	get、post	✘
XMLHttpRequest	JavaScript	get、post	✓
jQuery.get()	jQuery	get	✓
jQuery.post()	jQuery	post	✓
jQuery.ajax()	jQuery	get、post	✓