JavaScript

JavaScriptでPOSTする

jQueryのajaxを使わずにfetchでPOSTしたい。


jQuery

最初はjQueryを使った。ただ、最近のブラウザでは使わなくても出来るらしい。

$('#btn001').on('click',function (){
   $.ajax({
        url: '/save',
        type: "POST",
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({
          Title: $('#form001 [name=name]').val(),
          URL: $('#form001 [name=URL]').val()
        }),
        dataType: 'json'
    })
    .then(
        (r)=>{
            var notification = document.querySelector('#toast');
            notification.MaterialSnackbar.showSnackbar(
              {
                message: 'Post '+r.Title
              }
            );
        }
    );
});

fetch

fetchというのでできる。

これをボタンを押したら呼び出すようにする。

function post(ID){
  fetch('/save', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      Title: document.querySelector('#form'+ID+' input').value,
      URL: document.querySelector('#form'+ID+' select').value
    })
  })
  .then((r)=>r.json())
  .then(
    (r)=>{
      var notification = document.getElementById('toast');
      notification.MaterialSnackbar.showSnackbar(
        {
          message: 'Post'+r.Title
        }
      );
    }
  );
}

addEventListenerを使うところで躓いた。クリックしていないのにPOSTされてしまう。

引数を指定しない場合は関数名を書くだけで良い。

target.addEventListener('click', post);

引数を指定する場合はこのように書くと、即実行されてしまうらしい。

target.addEventListener('click', post('001'));

そこで、

target.addEventListener('click', function(){post('001')});

のように書くと大丈夫。さらに、アロー関数というのを使って

target.addEventListener('click', ()=>{post('001')});

のようにもできる。ちょっとすっきりする。

fetchと関係ないところで躓いた。前にも同じところで躓いたような…？

コメント

まだコメントはありません。