0
0

More than 3 years have passed since last update.

attr('action')を遷移先にする仕組み

Last updated at Posted at 2020-06-09

ajax通信での非同期通信の復習している最中、そういえばと目に止まったのがactionで遷移先を指定している以下のjsコード記述

※投稿ボタンを押した際、ajax通信を行う部分の抜粋

    let url = $(this).attr('action');
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType:'json',
      processData: false,
      contentType: false
    })

注目して頂きたいのが

let url = $(this).attr('action');

と言う箇所。
遷移先の変数を定義している部分なのですが、引っかかったのはattr('action')。
actionで遷移先指定できちゃうの・・・?どういう理屈で・・・?(震え声)

そんなこんなで好奇心に駆られて気づけばあれこれと調べていたのです。

さてここでattrについておさらいしていきましょう。

[attrの使い方]  ※jQueryでの記述

$(指定したい要素など).attr('属性値');

属性に対する値を取得する際に用いられる。もし値がないならundefinedで返す

つまり指定要素内のaction属性を取得してることになるんですね。
しかしながら最大の謎はaction属性でなぜ遷移できちゃうのか?

次にactionについておさらいしましょう。

今回は投稿ボタンでの部分、つまりform要素内です。
form要素ではactionは"送信先を指定する”ために使われるものなのです。

つまりactionにはそもそもURIパターンが入っているので、遷移先として指定できてしまうというわけです。

便利ですな〜

余談英会話

attrメソッドは、attribute(アトリビュート)の略。
使い方:
attribute A to B : AをBのおかげと考える。/AをBのせいと思う。
ex)
He attributed his success to working hard.
彼は成功したのは勤勉のおかげと考えた。

この単語がプログラミングではデータ属性の抽出として使われてることが非常に面白いですね。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0