【JavaScript】Ajaxの書き方あれこれ

どうもこんにちは。

今回は、使用するライブラリによって書き方が変えられるAjaxについてメモとして残そうと思います。

JavaScriptの場合（ライブラリなし）

fetch(`/users/${userId}`, {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
        "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').getAttribute('content')
    },
    body: JSON.stringify({
        user_data: {
            name: nametext
        }
    })
})
.then(response => response.text())
.then(data => {
    console.log("Ajax request successful.");
    eval(data);
})
.catch(error => {
    console.error('Error:', error);
});

jQueryの場合

$.ajax({
    url: `/users/${userId}`,
    type: "POST",
    contentType: "application/json",
    headers: {
        "X-CSRF-Token": $('meta[name="csrf-token"]').attr('content')
    },
    data: JSON.stringify({
        user_data: {
            name: nametext
        }
    }),
    success: function(data) {
        console.log("Ajax request successful.");
        eval(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error('Error:', textStatus, errorThrown);
    }
});

Reactの場合

import React, { useState } from 'react';

function UserComponent() {
  const [nametext, setNameText] = useState('');
  const userId = 'your_user_id';

  const handleInputChange = (event) => {
    setNameText(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    fetch(`/users/${userId}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
      },
      body: JSON.stringify({
        user_data: {
          name: nametext
        }
      })
    })
    .then(response => response.text())
    .then(data => {
      console.log("Ajax request successful.");
    })
    .catch(error => {
      console.error('Error:', error);
    });
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input 
          type="text" 
          value={nametext} 
          onChange={handleInputChange} 
          placeholder="Enter name"
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default UserComponent;

以上