JSON 형식을 사용하여 HTML5_html5 튜토리얼 기술로 양식을 제출하는 자세한 예

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 코드클립보드에 콘텐츠 복사

1. <form enctype='application/json'> 
2. <입력 이름='이름' 값='벤더'>
3. <선택 이름='하인드' >
4.  <옵션 선택됨>비트 가능< ;/옵션> 
5.  <옵션>킥 가능옵션>
6. 선택>
7. <입력 유형='체크박스' 이름='반짝이'확인>
8. 양식>
10. //생성된 Json 데이터는
11. {
12. "이름": "벤더"
13. , "hind": "비트 가능"
14. , "빛나는": 참
15. }

예시 2 양식에 동일한 이름의 양식 필드가 여러 개 있는 경우 JSON 배열로 인코딩

XML/HTML 코드클립보드에 콘텐츠 복사

1. <form enctype='application/json'>  
2.       <입력 유형='숫자'  이름='벽걸이' 값='1'>  
3.       <입력 유형='숫자'  이름='벽걸이' 값='2'>  
4.       <입력 유형='숫자'  이름='벽걸이' 값='3'>  
5.     양식>  
6.         
7.     // 생성하는 Json数据是   
8.     {   
9.       "벽에 붙은 병":   [1, 2, 3]   
10.     }  

예를 들어 3개의 광고 형식을 만들어 낸 광고

XML/HTML 코드复复内容到剪贴板

1. <form enctype='application/json'>  
2.   <입력 이름='pet[ 종]' 값='다후트'>  
3.   <입력 이름='pet[ 이름]' 값='하이파티아'>  
4.   <입력 이름='키즈[ 1]' 값='Thelma'>  
5.   <입력 이름='키즈[ 0]' 값='애슐리'>  
6. 양식>  
7.     
8. // 생성형 Json数据是   
9. {   
10.     '애완동물':  {   
11.         "종":  "다후트"   
12.     ,   "이름":     "히파티아"   
13.     }   
14. ,   '어린이':   ["Ashley", "Thelma"]   
15. }  

   

XML/HTML 코드

复复内容到剪贴板

1. <form enctype='application/json'>  
2.       <입력 이름='소리소리[ 0]' 값='썽크'>  
3.       <입력 이름='소리소리[ 2]' 값='썽크'>  
4.     양식>  
5.         
6.     // 생성하는 Json数据是   
7.     {   
8.         "hearbeat":   ["thunk", null, "thunk"]   
9.     }  

   

XML/HTML 코드

复复内容到剪贴板

1. <form enctype='application/json'>  
2.       <입력 이름='pet[ 0][종]' 값='다후트'>  
3.       <입력 이름='pet[ 0][이름]' 값='히파티아'>  
4.       <입력 이름='pet[ 1][종]' 값='고양이속 스툴투스'>
5.       <입력 이름='pet[ 1][이름]' 값='빌리'>  
6.     양식>  
7.         
8.     // 생성하는 Json数据是   
9.     {   
10.         '애완동물':  [   
11.             {   
12.                 '종':  '다후트'   
13.             ,   "이름":     "히파티아"   
14.             }   
15.         ,   {   
16.                 '종':  'Felis Stultus'   
17.             ,   "이름":     "빌리"   
18.             }   
19.         ]   
20.     }  

   

XML/HTML 코드

复复内容到剪贴板

1. <form enctype='application/json'> 
2.  <입력 이름='와우[ 이런][깊이][3][많이][힘][!]' 가치='놀라움' >
3.  양식> 
4.  
5. // 생성된 Json 데이터는
6. {
7. "와우": {
8. "그런": {
9. "깊은": [
10.                                                                                                                                    
, null
, null
, , {
“많이”: {
"힘": {
“!”: “놀라워”
                                                                 
17.                                                             
                                                              
18.                                                   
                                                        
19.                                                        
}
21. 예시 7 파일 업로드
XML/HTML 코드
23. 클립보드에 콘텐츠 복사
1. <form enctype='application/json'> 
2.  <입력 유형='파일' 이름='파일'여러>
3. 양식>
4.  
5. // 2개의 파일을 업로드한다고 가정하면 생성된 Json 데이터는 다음과 같습니다.
6. {
7. "파일": [
8.                                               
"유형": "텍스트/일반",
"이름": "dahut.txt",
"본문": "
11. REFBQUFBQUFIVVVVVVVVVVVVCEhIQo="
},
                                              
13. "유형": "텍스트/일반",
14. "이름": "litany.txt",
15. "본문": " SSBTDXN0IG5VDCBMZWFYLLLXVHCIBPCIBPCIB0AGUGBWLUZC1RWXSZIUCG
16. =="                                                     
]
}