JavaScript/jQuery를 사용하여 양식 데이터를 검색하려면 어떻게 해야 합니까?

Patricia Arquette
풀어 주다: 2024-11-10 15:31:02
원래의
776명이 탐색했습니다.

How can I retrieve form data using JavaScript/jQuery?

JavaScript/jQuery를 사용하여 양식 데이터 검색

양식 제출 시 클라이언트 측에서 검증 또는 처리를 위해 양식 데이터를 검색해야 하는 경우가 많습니다. 이 데이터에는 입력 필드, 선택 목록 및 기타 요소가 포함됩니다. 일반적인 질문 중 하나는 이 데이터를 단순화된 방식으로 얻는 방법입니다.

jQuery의 serializeArray() 메서드 사용

한 가지 우아한 솔루션은 jQuery() 메서드를 활용하는 것입니다. 양식 데이터를 나타내는 객체 배열을 반환합니다. 이 방법은 양식을 키-값 쌍의 배열로 효과적으로 직렬화합니다.

$(function () {
    var formData = $('#form').serializeArray();
});
로그인 후 복사

예를 들어 양식에 다음 필드가 포함된 경우:

<input type="radio" name="foo" value="1" checked="checked" />
<input type="radio" name="foo" value="0" />
<input name="bar" value="xxx" />
<select name="this">
    <option value="hi" selected="selected">Hi</option>
    <option value="ho">Ho</option>
</select>
로그인 후 복사

출력은 다음과 같습니다.

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]
로그인 후 복사

jQuery의 serialize() 메서드 사용

또는 jQuery()를 사용하여 양식 데이터의 쿼리 문자열 표현을 만들 수 있습니다.

$(function () {
    var formData = $('#form').serialize();
});
로그인 후 복사

이 방법은 앰퍼샌드로 구분된 키-값 쌍이 포함된 문자열을 출력하며 서버 제출에 적합합니다.

"foo=1&bar=xxx&this=hi"
로그인 후 복사

데모

보기 이 JSFiddle에서 두 가지 jQuery 메서드를 모두 사용하여 양식 데이터를 검색하는 실제 데모: https://jsfiddle.net/t7hvjne1/

위 내용은 JavaScript/jQuery를 사용하여 양식 데이터를 검색하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿