serialize

.serialize()

フォーム送信用の文字列を生成します。

.serialize()

パラメータ

この関数はパラメータを受け取りません。

複数選択はjQueryと同様、 サポートしていません。

例

ajaxを通してsubmitします。

<form action="/contact" method="POST">
  Email:
  <input type="email" name="email" value="test@example.com" />
  Message:
  <textarea type="email" name="message">Hello world</textarea>

  <button>Send</button>
</form>

ユーザーが"Send"ボタンをクリックすると、 以下のハンドラを使ってAjaxを通してデータを送信することができます。

// .handle() == .on() + preventDefault()
u('form.contact').handle('submit', async e => {
  // Body: email=test@example.com&message=Hello+world
  const body = u(e.target).serialize();
  const data = await fetch('/contact', {
    method: 'POST', body
  }).then(res => res.json());
  console.log('Response data:', data);
});

ネイティブのFormDataを使用している場合。

// .handle() == .on() + preventDefault()
u('form.contact').handle('submit', async e => {
  const body = new FormData(e.target);
  const data = await fetch('/contact', {
    method: 'POST', body
  }).then(res => res.json());
  console.log('Response data:', data);
});

デモ

テキストボックスに文字を入力して"PUSH"ボタンを押すと、 2段目のテキストボックスに'送信完了, (入力内容)'と出力します。

JavaScript

u('#demo').handle('submit', async e => {
  const body = u(e.target).serialize();
  const data = await fetch('../json/data_ajax.php', {
    method: 'POST',
    body: body,
    headers : {
      'Content-type' : 'application/x-www-form-urlencoded'
    },
  }).then(res => res.json());
  u('#demo input').nodes[1].value = '送信完了, ' + data.msg;
});

HTML

<form id="demo">
  <input type="text" name="msg">
  <button type="submit">PUSH</button>
  <br>
  <input type="text">
</form>

PHP

<?php
$msg = htmlentities($_POST['msg']) ?: 'no post.';
header('Content-Type: application/json');
echo json_encode(array('msg' => $msg));
exit;

関連項目

ajax() ajaxリクエストを処理します。