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

<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 函式庫