HTML에서 게시물을 사용하여 데이터를 제출하는 방법-HTML 튜토리얼-php.cn

HTTP/1.1 프로토콜에서 지정하는 HTTP 요청 방법에는 OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE 및 CONNECT가 포함됩니다. POST는 일반적으로 서버에 데이터를 제출하는 데 사용됩니다. 이 기사에서는 주로 POST를 통해 데이터를 제출하는 여러 가지 방법에 대해 설명합니다. HTTP/1.1 프로토콜에는 OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE가 포함됩니다. 연결하세요. POST는 일반적으로 서버에 데이터를 제출하는 데 사용됩니다. 이 기사에서는 주로 POST를 통해 데이터를 제출하는 여러 가지 방법을 설명합니다.

우리는 HTTP 프로토콜이 ASCII 코드로 전송되며 TCP/IP 프로토콜을 기반으로 하는 애플리케이션 계층 사양이라는 것을 알고 있습니다. 사양은 HTTP 요청을 상태 줄, 요청 헤더 및 메시지 본문의 세 부분으로 나눕니다. 다음과 유사합니다.

<method> <request-url> <version>
<headers>
<entity-body></entity-body></headers></version></request-url></method>

로그인 후 복사

프로토콜은 POST로 제출된 데이터가 메시지 본문(엔티티-본문)에 배치되어야 한다고 규정하지만 프로토콜은 데이터가 사용해야 하는 인코딩 방법을 지정하지 않습니다. 실제로 전송된 마지막 HTTP 요청이 위 형식을 충족하는 한 개발자는 메시지 본문의 형식을 스스로 결정할 수 있습니다.

그러나 데이터가 전송되기 전에 서버가 데이터를 성공적으로 구문 분석하는 경우에만 의미가 있습니다. Java와 같은 일반 서버측 언어 및 해당 프레임워크에는 공통 데이터 형식을 자동으로 구문 분석하는 기능이 내장되어 있습니다. 서버는 일반적으로 요청 헤더의 Content-Type 필드를 기반으로 요청의 메시지 본문이 인코딩되는 방식을 학습한 다음 본문을 구문 분석합니다. 따라서 POST 제출 데이터 체계에는 콘텐츠 유형과 메시지 본문 인코딩 방법이라는 두 부분이 포함됩니다. 본격적으로 소개를 시작하겠습니다.

application/x-www-form-urlencoded이것은 POST를 통해 데이터를 제출하는 가장 일반적인 방법입니다. 브라우저의 기본 양식의 경우 enctype 속성이 설정되지 않으면 결국 데이터는 application/x-www-form-urlencoded 모드로 제출됩니다. 요청은 다음과 유사합니다(이 문서에서는 관련 없는 요청 헤더가 생략됨).

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8
title=test&sub%5B%5D=1&sub%5B%5D=2&sub%5B%5D=3

로그인 후 복사

첫 번째, Content-Type은 application/x-www-form-urlencoded로 지정됩니다. 두 번째로 제출된 데이터는 key1을 따릅니다. =val1&key2= val2가 인코딩되고 키와 값이 모두 URL 트랜스코딩됩니다. 대부분의 서버측 언어는 이 방법을 잘 지원합니다. 예를 들어, PHP에서 POST[′title′]은 title 값을 얻을 수 있고, POST[′title′]은 title 값을 얻을 수 있으며, _POST['sub']는 하위 배열을 얻을 수 있습니다.

Ajax를 사용하여 데이터를 제출할 때 이 방법도 사용하는 경우가 많습니다. 예를 들어 JQuery의 Ajax에서 Content-Type의 기본값은 "application/x-www-form-urlencoded;charset=utf-8"입니다.

multipart/form-data이것은 또 다른 일반적인 POST 데이터 제출 방법입니다. 파일을 업로드하기 위해 양식을 사용할 때 양식의 암호화된 형식은 이 값과 동일해야 합니다. 요청 예시를 직접 살펴보겠습니다.

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="text"
title
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png
PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

로그인 후 복사

이 예시는 좀 더 복잡합니다. 먼저, 텍스트 내용과의 중복을 피하기 위해 경계를 생성하여 서로 다른 필드를 구분합니다. 그런 다음 Content-Type은 데이터가 mutipart/form-data로 인코딩되고 이 요청의 경계 내용이 무엇인지 지정합니다. 메시지 본문은 필드 수에 따라 유사한 구조를 가진 여러 부분으로 나뉩니다. 각 부분은 --boundary로 시작하고 내용 설명 정보, 캐리지 리턴, 마지막으로 필드의 특정 내용(텍스트 또는 바이너리)이 옵니다. . 파일을 전송하는 경우 파일 이름과 파일 형식 정보도 포함되어야 합니다. 메시지 본문은 --boundary-- 플래그로 끝납니다. mutipart/form-data에 대한 자세한 정의를 보려면 rfc1867로 이동하세요.

이 방법은 일반적으로 파일을 업로드하는 데 사용되며 주요 서버 언어에서도 이를 잘 지원합니다.

위에서 언급한 POST 데이터의 두 가지 방법은 브라우저에서 기본적으로 지원되며, 현 단계에서 기본 형식은 이 두 가지 방법만 지원합니다. 그러나 점점 더 많은 웹 사이트, 특히 WebApp이 데이터 상호 작용을 위해 Ajax를 사용함에 따라 우리는 개발에 더 많은 편의를 제공하기 위해 새로운 데이터 제출 방법을 완전히 정의할 수 있습니다.

application/json
application/json 이 Content-Type은 확실히 모든 사람에게 응답 헤더로 친숙합니다. 실제로 점점 더 많은 사람들이 메시지 본문이 직렬화된 JSON 문자열임을 서버에 알리기 위해 요청 헤더로 사용하고 있습니다. JSON 사양의 인기로 인해 IE 하위 버전을 제외한 모든 주요 브라우저는 기본적으로 JSON.stringify를 지원합니다. 서버 측 언어에도 JSON을 처리하는 기능이 있으므로 JSON을 사용할 때 문제가 발생하지 않습니다.

JSON 형식이 키-값 쌍보다 훨씬 더 복잡한 구조화된 데이터를 지원한다는 점도 유용합니다. 몇 년 전 프로젝트를 진행했을 때 제출해야 할 데이터의 수준이 매우 깊어서 JSON으로 직렬화해서 제출했던 기억이 납니다. 하지만 당시에는 JSON 문자열을 val로 사용하고 여전히 키-값 쌍에 배치하고 x-www-form-urlencoded 모드로 제출했습니다.

Google AngularJS의 Ajax 함수는 기본적으로 JSON 문자열을 제출합니다. 예를 들어 다음 코드는

var data = {&#39;title&#39;:&#39;test&#39;, &#39;sub&#39; : [1,2,3]};
$http.post(url, data).success(function(result) {
...
});

로그인 후 복사

보내진 최종 요청은 다음과 같습니다.

POST http://www.example.com HTTP/1.1
Content-Type: application/json;charset=utf-8
{"title":"test","sub":[1,2,3]}

로그인 후 복사

这种方案，可以方便的提交复杂的结构化数据，特别适合 RESTful 的接口。各大抓包工具如 Chrome 自带的开发者工具、Firebug、Fiddler，都会以树形结构展示 JSON 数据，非常友好。但也有些服务端语言还没有支持这种方式，例如 php 就无法通过 $_POST 对象从上面的请求中获得内容。这时候，需要自己动手处理下：在请求头中 Content-Type 为 application/json 时，从 php://input 里获得原始输入流，再 json_decode 成对象。一些 Java 框架已经开始这么做了。

当然 AngularJS 也可以配置为使用 x-www-form-urlencoded 方式提交数据。

text/xml

XML-RPC（XML Remote Procedure Call）。它是一种使用 HTTP 作为传输协议，XML 作为编码方式的远程调用规范。典型的 XML-RPC 请求是这样的：
POST http://www.example.com HTTP/1.1
Content-Type: text/xml
<!--?xml version="1.0"?-->
<methodcall>
<methodname>examples.getStateName</methodname>
<params>
<param>
<value><i4>41</i4></value>
</params>
</methodcall>

로그인 후 복사

XML-RPC 协议简单、功能够用，各种语言的实现都有。它的使用也很广泛，如 WordPress 的 XML-RPC Api，搜索引擎的 ping 服务等等。JavaScript 中，也有现成的库支持以这种方式进行数据交互，能很好的支持已有的 XML-RPC 服务。不过，我个人觉得 XML 结构还是过于臃肿，一般场景用 JSON 会更灵活方便。

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。