ajax(axios)でフォーム情報を送信する際の処理

例えば

<h2>aaa</h2>
<input type="radio" name="data[aaa]" value="1">
<input type="radio" name="data[aaa]" value="2">

<h2>bbb</h2>
<input type="radio" name="data[bbb]" value="1">
<input type="radio" name="data[bbb]" value="2">

といったフォームがあるとします。

この情報をjQueryなど使わず、プレーンなJavaScriptで書こうとしたときに、簡単そうでなぜか迷ってしまったので、備忘録として。
（axiosはnpmでインストール済みと仮定）

ちなみにjQueryだとserialize()など使えば簡単にできますね。

結論

const url = 'xxxx/xxxxx';
const elements = document.querySelectorAll("input[name^='data']:checked");
const formData = new FormData();

elements.forEach((element) => {
    formData.append(element.name, element.value);
});

const postData = new URLSearchParams(formData);

axios.post(url, postData);

という感じで、FormData()を使って、append()していく形で実装するのが一番いいです。

良くない例

const url = 'xxxx/xxxxx';
const elements = document.querySelectorAll("input[name^='data']:checked");
let postData = {};

elements.forEach((element) => {
    postData[element.name] = element.value;
});

axios.post(url, postData);

という感じで書いてしまうと、PHP側には配列構造の形でデータが送信されず、name値が data[aaa] という形で送られてしまいますので、その後の処理がものすごいやりにくいです。

FormData()を使って処理しましょう。