Sự khác biệt giữa Yêu cầu Tải trọng Tải trọng so với Dữ liệu Biểu mẫu dữ liệu như được thấy trong tab Công cụ phát triển Chrome

Tôi có một ứng dụng web cũ mà tôi phải hỗ trợ (mà tôi không viết).

Khi tôi điền vào biểu mẫu và gửi rồi kiểm tra tab "Mạng" trong Chrome, tôi thấy "Yêu cầu tải trọng" nơi tôi thường thấy "Dữ liệu biểu mẫu". Sự khác biệt giữa hai và khi nào một sẽ được gửi thay vì khác?

Đã làm rõ điều này, nhưng thực sự không tìm thấy bất kỳ thông tin nào giải thích điều này (chỉ những người đang cố gắng để có được các ứng dụng javascript để gửi "Dữ liệu biểu mẫu" thay vì "Yêu cầu tải trọng".

Tải trọng yêu cầu - hay chính xác hơn: thân tải trọng của Yêu cầu HTTP - là dữ liệu thường được gửi bởi Yêu cầu POST hoặc PUT . Đó là một phần sau khi các tiêu đề và CRLFmột yêu cầu HTTP .

Một yêu cầu có Content-Type: application/jsonthể trông như thế này:

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

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

Nếu bạn gửi cái này cho mỗi AJAX, trình duyệt chỉ cần hiển thị cho bạn những gì nó đang gửi dưới dạng tải trọng. Đó là tất cả những gì nó có thể làm bởi vì nó không biết dữ liệu đến từ đâu.

Nếu bạn gửi Biểu mẫu HTML với method="POST"và Content-Type: application/x-www-form-urlencodedhoặc Content-Type: multipart/form-datayêu cầu của bạn có thể giống như thế này:

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

foo=bar&name=John

Trong trường hợp này, dữ liệu biểu mẫu là tải trọng yêu cầu. Ở đây Trình duyệt biết nhiều hơn: nó biết rằng thanh là giá trị của foo trường đầu vào của biểu mẫu đã gửi. Và đó là những gì nó đang hiển thị cho bạn.

Vì vậy, chúng khác nhau ở Content-Typenhưng không phải trong cách gửi dữ liệu. Trong cả hai trường hợp, dữ liệu nằm trong phần thân thông điệp. Và Chrome phân biệt cách dữ liệu được trình bày cho bạn trong Công cụ dành cho nhà phát triển.

Trong Chrome, yêu cầu với 'Loại nội dung: ứng dụng / json' hiển thị dưới dạng Yêu cầu PayedLoad và gửi dữ liệu dưới dạng đối tượng json.

Nhưng yêu cầu với 'Loại nội dung: application / x-www-form-urlencoding' hiển thị Dữ liệu biểu mẫu và gửi dữ liệu dưới dạng Khóa: Cặp giá trị , vì vậy nếu bạn có mảng đối tượng trong một khóa, thì căn hộ đó là giá trị của khóa đó:

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

gửi

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