HTML 버튼이 POST 요청을 수행 할 수 있습니까?

HTML 버튼이 POST 요청을 수행 할 수 있습니까?

---

POST 요청을 보내기 위해 제출 유형 버튼을 원합니다.

나는 다음과 같은 것에 대해 생각하고 있습니다.

<form action = "" method = "post">
    <button>Upvote</button>
<form>

여기서 "Upvote"문자열은 POST 요청에서 이름으로 전송됩니다.

나는 이것이 작동하지 않는다는 것을 알고 있으며 AJAX (javascript)를 사용하는 방법이 있다는 것을 알고 있지만이 분야에 상당히 익숙합니다. 나는 이것이 일반적으로 가능한지 궁금합니다.

최신 정보

누군가가 <input>태그 를 사용한다고 제안 했습니다. 문제는 POST가 아닌 GET을 생성한다는 것입니다.

---

이는 "제출"유형의 입력 요소로 수행 할 수 있습니다. 이것은 사용자에게 버튼으로 표시되며 버튼을 클릭하면 양식이 전송됩니다.

<form action="" method="post">
    <input type="submit" name="upvote" value="Upvote" />
</form>

---

버튼에 이름과 값을 지정해야합니다.

이름 없이는 컨트롤을 제출할 수 없으며 버튼 요소의 내용은 값이 아니라 레이블입니다.

<form action="" method="post">
    <button name="foo" value="upvote">Upvote</button>
</form>

---

JS의 도움으로 그렇게 할 수 있습니다. 아래 예에서는 fetch 메소드를 사용하여 버튼 클릭시 POST 요청이 제출됩니다.

const button = document.getElementById('post-btn');

button.addEventListener('click', async _ => {
  try {     
    const response = await fetch('yourUrl', {
      method: 'post',
      body: {
        // Your body
      }
    });
    console.log('Completed!', response);
  } catch(err) {
    console.error(`Error: ${err}`);
  }
});

<button id="post-btn">I'm a button</button>

---

다음을 수행 할 수 있습니다.

• 또는 <input type="submit" ..>해당 버튼 대신을 사용하십시오 .
• 또는 약간의 자바 스크립트를 사용하여 양식 객체 (이름 또는 ID 사용)를 확보하고 호출 submit(..)합니다. 예 : form.submit(). 이 코드를 버튼 클릭 이벤트에 첨부합니다. 이것은 양식 매개 변수를 직렬화하고 양식의 메소드 속성에 지정된대로 GET 또는 POST 요청을 실행합니다.

참조 URL : https://stackoverflow.com/questions/16036041/can-a-html-button-perform-a-post-request