JSON 인코딩 형식으로 양식 데이터를 제출하는 것은 HTML5가 WEB 개발 및 발전에 기여한 또 다른 주요 요소입니다. 과거에는 HTML 양식 데이터가 키-값 방식을 통해 서버 측에 전송되었습니다. 데이터 구성의 형태는 매우 원시적입니다. 양식 데이터를 JSON 형식으로 제출하는 방식이 새롭게 등장한 방식은 양식의 모든 데이터를 특정 사양에 따라 JSON 형식으로 변환한 후 서버에 전송하는 방식입니다. 서버가 수신한 데이터는 직접 사용할 수 있는 정규화된 JSON 코드입니다. JSON 형식으로 양식 제출을 선언하는 방법
모든 사람은 양식을 사용하여 파일을 업로드하는 방법에 익숙해야 합니다. HTML의 양식 태그에 enctype="multipart/form-data" 문을 추가해야 합니다. 이 문은 브라우저에 양식 데이터를 파일로 보내도록 지시합니다. 업로드 모드. JSON 형식 제출 양식의 선언은 다음과 유사합니다: enctype='application/json'.
이전 브라우저와의 호환성
JSON 형식으로 양식을 제출하는 것은 HTML5의 매우 새로운 사양입니다. 이러한 사양을 구현하는 최신 브라우저만이 enctype='application/json'의 의미를 인식하고 양식 데이터를 JSON 형식으로 올바르게 패키징할 수 있습니다. 일부 오래된 브라우저와 이러한 표준을 아직 구현하지 않은 브라우저의 경우 enctype='application/json'이 나타내는 내용을 인식할 수 없으므로 양식의 enctype이 자동으로 application/x-www-form-urlencoded 기본 인코딩으로 저하됩니다. . 서버측 코드는 enctype 값에 따라 데이터 수신 방법을 결정할 수 있습니다.
JSON 인코딩 형식 제출양식 형식 예시
예시 1 기본 사용법
XML/HTML 코드클립보드에 콘텐츠 복사
- <form enctype='application/json'>
-
<입력 이름='이름' 값='벤더'>
-
<선택 이름='하인드' >
-
<옵션 선택됨>비트 가능< ;/옵션>
-
<옵션>킥 가능옵션>
-
선택>
-
<입력 유형='체크박스' 이름='반짝이'확인>
-
양식>
-
- //생성된 Json 데이터는
- {
- "이름": "벤더"
- , "hind": "비트 가능"
- , "빛나는": 참
- }
예시 2 양식에 동일한 이름의 양식 필드가 여러 개 있는 경우 JSON 배열로 인코딩
XML/HTML 코드클립보드에 콘텐츠 복사
- <form enctype='application/json'>
-
<입력 유형='숫자' 이름='벽걸이' 값='1'>
-
<입력 유형='숫자' 이름='벽걸이' 값='2'>
-
<입력 유형='숫자' 이름='벽걸이' 값='3'>
-
양식>
-
- // 생성하는 Json数据是
- {
- "벽에 붙은 병": [1, 2, 3]
- }
예를 들어 3개의 광고 형식을 만들어 낸 광고
XML/HTML 코드复复内容到剪贴板
- <form enctype='application/json'>
-
<입력 이름='pet[ 종]' 값='다후트'>
-
<입력 이름='pet[ 이름]' 값='하이파티아'>
-
<입력 이름='키즈[ 1]' 값='Thelma'>
-
<입력 이름='키즈[ 0]' 값='애슐리'>
-
양식>
-
- // 생성형 Json数据是
- {
- '애완동물': {
- "종": "다후트"
- , "이름": "히파티아"
- }
- , '어린이': ["Ashley", "Thelma"]
- }
XML/HTML 코드
复复内容到剪贴板
- <form enctype='application/json'>
-
<입력 이름='소리소리[ 0]' 값='썽크'>
-
<입력 이름='소리소리[ 2]' 값='썽크'>
-
양식>
-
- // 생성하는 Json数据是
- {
- "hearbeat": ["thunk", null, "thunk"]
- }
XML/HTML 코드
复复内容到剪贴板
- <form enctype='application/json'>
-
<입력 이름='pet[ 0][종]' 값='다후트'>
-
<입력 이름='pet[ 0][이름]' 값='히파티아'>
-
<입력 이름='pet[ 1][종]' 값='고양이속 스툴투스'>
-
<입력 이름='pet[ 1][이름]' 값='빌리'>
-
양식>
-
- // 생성하는 Json数据是
- {
- '애완동물': [
- {
- '종': '다후트'
- , "이름": "히파티아"
- }
- , {
- '종': 'Felis Stultus'
- , "이름": "빌리"
- }
- ]
- }
XML/HTML 코드
复复内容到剪贴板
- <form enctype='application/json'>
-
<입력 이름='와우[ 이런][깊이][3][많이][힘][!]' 가치='놀라움' >
-
양식>
-
- // 생성된 Json 데이터는
- {
- "와우": {
- "그런": {
- "깊은": [
-
, null -
, null -
, , { -
“많이”: { -
"힘": { -
“!”: “놀라워” -
-
-
-
} -
-
예시 7 파일 업로드
-
XML/HTML 코드- 클립보드에 콘텐츠 복사
- <form enctype='application/json'>
-
<입력 유형='파일' 이름='파일'여러>
-
양식>
-
- // 2개의 파일을 업로드한다고 가정하면 생성된 Json 데이터는 다음과 같습니다.
- {
- "파일": [
-
"유형": "텍스트/일반", -
"이름": "dahut.txt", -
"본문": "-
REFBQUFBQUFIVVVVVVVVVVVVCEhIQo="
}, -
- "유형": "텍스트/일반",
- "이름": "litany.txt",
- "본문": " SSBTDXN0IG5VDCBMZWFYLLLXVHCIBPCIBPCIB0AGUGBWLUZC1RWXSZIUCG
- =="
] -
} -
-