JavaScript/jQuery를 사용하여 양식 데이터를 JSON 개체로 검색하는 방법은 무엇입니까?

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

양식 데이터를 캡처할 때 기존 HTML 전용 제출을 반영하는 간단한 접근 방식을 찾을 수 있습니다. 방법. 다음 형식을 고려하세요.

`

<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>

`

목표는 이 양식에서 다음 JSON 개체를 얻는 것입니다.

{
    "foo": "1",
    "bar": "xxx",
    "this": "hi"
}

그러나 다음과 같이 지나치게 단순화된 접근 방식은 모든 양식 요소(예: 텍스트 영역, 선택 항목, 라디오 버튼 및 확인란)를 정확하게 캡처하지 못할 수 있습니다.

$("#form input").each(function () {
    data[theFieldName] = theFieldValue;
});

해결책 : $('form').serializeArray()

다행히도 jQuery는 $('form').serializeArray() 메서드를 제공합니다. 이 메서드는 각 개체의 이름과 값을 포함하는 개체 배열을 반환합니다. 양식 요소:

[
  {"name":"foo","value":"1"},
  {"name":"bar","value":"xxx"},
  {"name":"this","value":"hi"}
]

대체 옵션: $('form').serialize()

양식 데이터의 문자열 표현을 선호하는 경우 다음을 수행할 수 있습니다. URL 인코딩된 문자열을 반환하는 $('form').serialize()를 사용하세요.

"foo=1&bar=xxx&this=hi"

실시간 데모를 보려면 제공된 jsfiddle 데모를 참조하세요.

위 내용은 JavaScript/jQuery를 사용하여 양식 데이터를 JSON 개체로 검색하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!