Maison > Article > interface Web > Comment soumettre des données en utilisant une publication en HTML

Comment soumettre des données en utilisant une publication en HTML

墨辰丷original: 2018-06-04 15:24:4020611parcourir

Les méthodes de requête HTTP spécifiées par le protocole HTTP/1.1 incluent OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE et CONNECT. POST est généralement utilisé pour soumettre des données au serveur. Cet article traite principalement de plusieurs façons de soumettre des données via POST

Les méthodes de requête HTTP spécifiées par le protocole HTTP/1.1 incluent OPTIONS, GET, HEAD, POST, PUT, DELETE, et TRACE, CONNECT ces types. POST est généralement utilisé pour soumettre des données au serveur. Cet article traite principalement de plusieurs façons de soumettre des données via POST.

Nous savons que le protocole HTTP est transmis en code ASCII et est une spécification de couche application basée sur le protocole TCP/IP. La spécification divise les requêtes HTTP en trois parties : la ligne d'état, les en-têtes de requête et le corps du message. Similaire à ce qui suit :

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

Le protocole stipule que les données soumises par POST doivent être placées dans le corps du message (corps d'entité), mais le protocole ne précise pas quelle méthode de codage les données doivent utiliser. En fait, les développeurs peuvent décider eux-mêmes du format du corps du message, à condition que la dernière requête HTTP envoyée respecte le format ci-dessus.

Cependant, avant que les données ne soient envoyées, cela n'a de sens que si le serveur les analyse avec succès. Les langages généraux côté serveur tels que Java et leurs frameworks disposent de fonctions intégrées pour analyser automatiquement les formats de données courants. Le serveur apprend généralement comment le corps du message dans la requête est codé en fonction du champ Content-Type dans l'en-tête de la requête, puis analyse le corps. Ainsi, lorsqu'il s'agit du schéma de données de soumission POST, il comprend deux parties : le type de contenu et la méthode d'encodage du corps du message. Commençons officiellement à les présenter.

application/x-www-form-urlencoded

Cela devrait être le moyen le plus courant de soumettre des données via POST. Pour le formulaire natif du navigateur, si l'attribut enctype n'est pas défini, les données seront finalement soumises en mode application/x-www-form-urlencoded. La requête est similaire à la suivante (les en-têtes de requête non pertinents sont omis dans cet article) :

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

Premièrement, le Content-Type est spécifié comme application/x-www-form-urlencoded ; Les données sont codées selon key1=val1&key2=val2, et key et val sont tous deux transcodés en URL. La plupart des langages côté serveur prennent bien en charge cette méthode. Par exemple, en PHP, POST[′title′] peut obtenir la valeur du titre, POST[′title′] peut obtenir la valeur du titre et _POST['sub'] peut obtenir le sous-tableau.

Souvent, nous utilisons également cette méthode lors de la soumission de données à l'aide d'Ajax. Par exemple, dans Ajax de JQuery, la valeur par défaut de Content-Type est "application/x-www-form-urlencoded;charset=utf-8".

multipart/form-data

Il s'agit d'une autre méthode courante de soumission de données POST. Lorsque nous utilisons un formulaire pour télécharger des fichiers, l'enctypage du formulaire doit être égal à cette valeur. Regardons directement un exemple de requête :

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

Cet exemple est un peu plus compliqué. Tout d'abord, une limite est générée pour séparer les différents champs. Afin d'éviter la duplication avec le contenu du texte, la limite est très longue et compliquée. Ensuite, Content-Type spécifie que les données sont codées avec mutipart/form-data et quel est le contenu limite de cette requête. Le corps du message est divisé en plusieurs parties avec une structure similaire en fonction du nombre de champs. Chaque partie commence par --boundary, suivie des informations de description du contenu, suivies d'un retour chariot et enfin du contenu spécifique du champ (texte ou binaire). . Si un fichier est en cours de transfert, les informations sur le nom et le type de fichier doivent également être incluses. Le corps du message se termine par l'indicateur --boundary--. Pour la définition détaillée de mutipart/form-data, veuillez accéder à la rfc1867 pour la voir.

Cette méthode est généralement utilisée pour télécharger des fichiers, et les principaux langages de serveur la prennent également en charge.

Les deux méthodes de données POST mentionnées ci-dessus sont nativement supportées par les navigateurs, et à ce stade, les formulaires natifs ne supportent que ces deux méthodes. Mais comme de plus en plus de sites Web, en particulier les WebApps, utilisent tous Ajax pour l'interaction des données, nous pouvons complètement définir de nouvelles méthodes de soumission de données pour apporter plus de commodité au développement.

application/json

application/json Ce type de contenu est certainement familier à tout le monde en tant qu'en-tête de réponse. En fait, de plus en plus de personnes l'utilisent désormais comme en-tête de requête pour indiquer au serveur que le corps du message est une chaîne JSON sérialisée. En raison de la popularité de la spécification JSON, tous les principaux navigateurs, à l'exception des versions inférieures d'IE, prennent en charge nativement JSON.stringify. Les langages côté serveur ont également des fonctions de traitement de JSON, vous ne rencontrerez donc aucun problème lors de l'utilisation de JSON.

Il est également utile que le format JSON prenne en charge des données structurées beaucoup plus complexes que les paires clé-valeur. Je me souviens que lorsque je travaillais sur un projet il y a quelques années, les données à soumettre avaient un niveau très approfondi. J'ai sérialisé les données en JSON et je les ai soumises. Mais à ce moment-là, j'utilisais la chaîne JSON comme val, je la plaçais toujours dans la paire clé-valeur et je la soumettais en mode x-www-form-urlencoded.

La fonction Ajax dans AngularJS de Google soumet une chaîne JSON par défaut. Par exemple, le code suivant :

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

La requête finale envoyée est :

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 会更灵活方便。

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

Articles Liés

Voir plus