Jaka jest różnica między „Żądaj ładunku” a „Dane formularza”, jak widać na karcie Sieć narzędzi deweloperskich Chrome

Mam starą aplikację internetową, którą muszę obsługiwać (której nie napisałem).

Kiedy wypełniam formularz i przesyłam, a następnie sprawdzam kartę „Sieć” w Chrome, widzę „Poproś o ładunek”, gdzie normalnie widziałbym „Dane formularza”. Jaka jest różnica między tymi dwoma terminami i kiedy jeden zostanie wysłany zamiast drugiego?

Googlowałem to, ale tak naprawdę nie znalazłem żadnych informacji wyjaśniających to (tylko ludzie próbują dostać aplikacje javascript do wysyłania „Formularzy danych” zamiast „Żądaj ładunku”.

Żądanie ładunku - a ściślej: treść ładunku żądania HTTP - to dane zwykle wysyłane przez żądanie POST lub PUT . Jest to część po nagłówkach i tym CRLFo żądaniu HTTP .

Żądanie z Content-Type: application/jsonmoże wyglądać następująco:

POST /some-path HTTP/1.1
Content-Type: application/json

{ "foo" : "bar", "name" : "John" }

Jeśli prześlesz to na AJAX, przeglądarka po prostu pokaże ci, co przesyła jako treść ładunkową. To wszystko, co może zrobić, ponieważ nie ma pojęcia, skąd pochodzą dane.

Jeśli prześlesz formularz HTML za pomocą method="POST"i Content-Type: application/x-www-form-urlencodedlub Content-Type: multipart/form-dataTwoja prośba może wyglądać następująco:

POST /some-path HTTP/1.1
Content-Type: application/x-www-form-urlencoded

foo=bar&name=John

W tym przypadku dane formularza to ładunek żądania. Tutaj przeglądarka wie więcej: wie, że słupek jest wartością foo pola wejściowego przesłanego formularza. I to wam pokazuje.

Różnią się Content-Typewięc sposobem przesyłania danych, ale nie sposobem. W obu przypadkach dane znajdują się w treści wiadomości. Chrome rozróżnia sposób prezentowania danych w Narzędziach programisty.

W Chrome żądanie z „Content-Type: application / json” pokazuje się jako Request PayedLoad i wysyła dane jako obiekt json.

Ale zapytanie z „Content-Type: application / x-www-form-urlencoded” pokazuje dane formularza i wysyła dane jako parę klucz: wartość , więc jeśli masz tablicę obiektów w jednym kluczu, to zmienia wartość tego klucza:

{ Id: 1, 
name:'john', 
phones:[{title:'home',number:111111,...},
        {title:'office',number:22222,...}]
}

wysyła

{ Id: 1, 
name:'john', 
phones:[object object]
phones:[object object]
}