Form

μ•žμ—μ„œ μ—°μŠ΅ν–ˆλ˜ 제이쿼리의 사고 λ°©μ‹μ—μ„œ λ²—μ–΄λ‚˜κΈ° μœ„ν•΄ μ‹€μŠ΅ ν•œ 개λ₯Ό 더 ν•΄λ³΄κ² μŠ΅λ‹ˆλ‹€. 제이쿼리둜 κ΅¬ν˜„λœ μ‚¬μš©μž μž…λ ₯폼이 μ•„λž˜μ™€ 같이 μžˆμ„ λ•Œ μ–΄λ–»κ²Œ 뷰둜 λ°”κΏ€ 수 μžˆμ„κΉŒμš”?

<form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
  <div class="mb-4">
    <label class="block text-grey-darker text-sm font-bold mb-2" for="username">
      Username
    </label>
    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline"
      id="username" type="text" placeholder="Username">
  </div>
  <div class="mb-6">
    <label class="block text-grey-darker text-sm font-bold mb-2" for="password">
      Password
    </label>
    <input class="shadow appearance-none border border-red rounded w-full py-2 px-3 text-grey-darker mb-3 leading-tight focus:outline-none focus:shadow-outline"
      id="password" type="password" placeholder="******************">
    <p class="text-red text-xs italic">Please choose a password.</p>
  </div>
  <div class="flex items-center justify-between">
    <button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
      type="submit">
      Sign In
    </button>
    <a class="inline-block align-baseline font-bold text-sm text-blue hover:text-blue-darker" href="#">
      Forgot Password?
    </a>
  </div>
</form>

<script>
  $(document).ready(function() {
    $('form').on('submit', function(event) {
      event.preventDefault();

      var username = $(this).find('#username');
      var password = $(this).find('#password');

      $.ajax({
        url: 'https://jsonplaceholder.typicode.com/users/',
        method: 'POST',
        dataType: 'json',
        contentType: "application/json; charset=UTF-8",
        data: JSON.stringify({
          name: username.val(),
          password: password.val()
        })
      })
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });

      username.val('');
      password.val('');
    });
  });
</script>

μ˜ˆμ‹œ μ½”λ“œ 확인은 μ—¬κΈ°μ„œ
μ •λ‹΅ μ½”λ“œλŠ” 확인은 μ—¬κΈ°μ„œ