양식 버튼이 페이지를 새로 고치는 것을 중지하는 방법은 무엇입니까?

양식 버튼으로 페이지 새로 고침 방지

버튼이 있는 양식을 만들 때 버튼을 클릭하면 원치 않는 페이지 새로 고침이 발생하는 문제가 발생하는 것이 일반적입니다. 특히 페이지에 새로 고침 시 재설정되는 동적으로 로드된 데이터가 포함된 경우 문제가 될 수 있습니다.

문제 설명

제공된 코드 조각에서:

<form method="POST">
    <button name="data" onclick="getData()">Click</button>
</form>

버튼을 클릭하면 getData() 함수가 호출되지만 페이지가 자동으로 새로 고쳐집니다. 이는 양식에 있는 버튼의 기본 유형이 양식 제출을 시작하고 페이지를 다시 로드하는 "제출"이기 때문에 발생합니다.

해결책

페이지 새로 고침을 방지하려면 , 다음과 같이 버튼의 유형 속성을 "button"으로 수정합니다.

<button name="data" type="button" onclick="getData()">Click</button>

type="button"을 설정하면 버튼이 더 이상 양식 제출을 시작하지 않습니다. 대신 페이지에 영향을 주지 않고 지정된 onclick 이벤트만 실행하는 일반 버튼처럼 작동합니다.

설명

type 속성은 버튼 유형을 정의합니다. 가능한 값은 다음과 같습니다.

• submit: 양식을 제출합니다. 기본값입니다.
• reset: 양식을 초기 상태로 재설정합니다.
• 버튼: 제출하거나 제출하지 않고 사용자 정의 버튼 역할을 합니다. 양식을 재설정합니다.

type="button"을 설정하면 버튼을 효과적으로 버튼으로 변환할 수 있습니다. 페이지를 새로 고치지 않고 원하는 JavaScript 기능을 실행하는 비제출 버튼입니다.

위 내용은 양식 버튼이 페이지를 새로 고치는 것을 중지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!