More than 1 year has passed since last update.

内容

HTMLで記述したボタンをクリックしたときに、JavaScriptでリクエスト送信を行うためのメモ。

参考URL

基本形

ただリクエストを出すだけのJavaScriptを以下に示す。

function execRequest(action, method) {
    var form = document.createElement("form");
    form.setAttribute("action", action); // 投げたいURLを書く。
    form.setAttribute("method", method); // POSTリクエストもしくはGETリクエストを書く。
    form.style.display = "none"; // 画面に表示しないことを指定する
    document.body.appendChild(form);
    form.submit();
}

リクエスト時に値も送る方法

JavaScriptでフォームを作成し、その中に送信したい値を入れて、リクエストを出す。GETリクエストだと値がユーザーに見られるため、必要に応じてGETリクエストなのかPOSTリクエストなのか考える必要有り。

function execRequest(action, method, data) {
    var form = document.createElement("form");
    form.setAttribute("action", action); // 投げたいURLを書く。
    form.setAttribute("method", method); // POSTリクエストもしくはGETリクエストを書く。
    form.style.display = "none"; // 画面に表示しないことを指定する
    document.body.appendChild(form);
    if (data !== undefined) {
        var input = document.createElement('input');
        input.setAttribute('type', 'hidden');
        input.setAttribute('name', 'name'); //「name」は適切な名前に変更する。
        input.setAttribute('value', data);
        form.appendChild(input);
    }
    form.submit();
}

dataには、送信したいデータを書く。もし複数ある場合は、第3引数にパラメタを渡さずに、JavaScriptの中で複数のデータを取得し、フォームに追加する処理を書いても良さそう。