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 중국어 웹사이트의 기타 관련 기사를 참조하세요!