http post 가 요청 한 몇 가지 데이터 전송 방식 을 자세히 설명 합 니 다.
Http 의 요청 전송 방식 은 매우 많 습 니 다.
우 리 는 Post 방식 을 중점적으로 설명 한다.Post 요청 은 요청 헤더 (header) 와 요청 체 (body) 두 부분 을 포함 합 니 다.
Post 에서 흔히 볼 수 있 는 요청 체 (body) 는 세 가지 전송 내용 유형 인 Content - type: application / x - www - form - urlencoded, application / json, multipart / form - data 가 있 습 니 다. 물론 다른 몇 가지 가 있 지만 자주 사용 되 지 않 습 니 다. 자주 사용 하 는 것 은 이 세 가지 입 니 다.
첫 번 째: application / x - ww - form - urlencoded.
Postman 을 통 해 Post 가 요청 한 인 자 는 보통 Body 에 놓 여 있 음 을 볼 수 있 습 니 다.우리 의 application / x - ww - form - urlencoded 방식 도 Post 가 최초 로 지원 하 는 데이터 전송 방식 입 니 다. 이것 도 key 와 value 형식 입 니 다. 우리 의 매개 변 수 를 GET 방식 과 유사 하 게 문자열 로 연결 합 니 다. 예 를 들 어 key 1 = value 1 & key 2 = value 2 등 형식 입 니 다. 그리고 이 매개 변수 문자열 을 urlencode 인 코딩 합 니 다.바디 에 요청 데 이 터 를 보 냅 니 다.
다음은 자바 Spring MVC, Android OkHttp, Retrofit, JS Ajax, Nodejs 로 각각 이러한 방식 의 요청 과 인터페이스 작성 을 보 여 줍 니 다.
자바 의 Spring MVC 에서 기본적으로 Controller 인 터 페 이 스 를 작성 하여 데이터 전송 을 요청 하 는 것 이 바로 이러한 방식 입 니 다. application / x - www - form - urlencoded.
package com.web.mvc.controller;
import com.google.gson.FieldAttributes;
import com.google.gson.Gson;
import com.web.mvc.model.Entity;
import com.web.mvc.model.User;
import com.web.mvc.service.EntityService;
import com.web.mvc.service.IEntityService;
import com.web.mvc.utils.RedisUtils;
import com.web.mvc.utils.Utils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import java.io.File;
import java.io.IOException;
import java.sql.SQLException;
import org.apache.commons.codec.binary.Base64;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import java.util.HashMap;
import java.util.List;
//@Controller
@RestController
@RequestMapping("/entity")
public class EntityController {
@Autowired
private IEntityService entityService;
// form-urlcoded
@CrossOrigin
@RequestMapping(value = "/urlcodedReq", method = RequestMethod.POST)
@ResponseBody
public String urlcodedReq(@RequestParam String name,
@RequestParam String pwd) {
System.out.println("urlcodedReq:" + name + " " + pwd);
Gson gson = new Gson();
HashMap map = new HashMap<>();
map.put("name", name);
map.put("pwd", pwd);
return gson.toJson(map);
}
} @ CrossOrigin: 크로스 도 메 인 요청 을 지원 하 는 것 을 처리 합 니 다.
@ Response Body: 방법 에 있어 서 반환 을 요청 한 데 이 터 를 http response body 에 기록 하 는 것 을 의미 합 니 다. 즉, 페이지 전환 이 아 닌 데 이 터 를 되 돌려 주 는 것 입 니 다.
이상 은 자바 Spring MVC 가 Controller Post 인 터 페 이 스 를 작성 하 는 방법 입 니 다.
다음은 Android 에서 Retrofit 의 요청 작성 방법 을 살 펴 보 겠 습 니 다.
public interface ApiService {
//application/x-www-form-urlencoded
@FormUrlEncoded
@POST("urlcodedReq")
Call getRepos(@Field("name") String name, @Field("pwd") String pwd);
} @ FormUrlEncoded 주석 을 넣 으 면 됩 니 다.
Okhttp 에서 요청 한 글 씨 를 다시 봅 니 다:
public class Utils {
private static String
url = "http://192.168.1.130:8086/entity/urlcodedReq";
public static void okPost() {
OkHttpClient client = new OkHttpClient();
client.newBuilder()
.build();
//application/x-www-form-urlencoded
RequestBody body = new FormBody.Builder()
.add("name", "123")
.add("pwd", "pwd1")
.build();
Request request = new Request.Builder()
.post(body)
.url(url)
.build();
client.newCall(request).enqueue(new Callback() {
@Override
public void onFailure(Call call, IOException e) {
System.out.println("onFailure:" + e.getLocalizedMessage());
}
@Override
public void onResponse(Call call, Response response) throws IOException {
System.out.println("onResponse:" + response.body().string());
}
});
}
}다음은 JS 의 Ajax 쓰 기 를 살 펴 보 겠 습 니 다.
/**
* Ajax POST
*/
function getOrigantAjaxPost() {
var stringData='name=value1&pwd=value2'
var oAjax = null;
// HTTP
try {
oAjax = new XMLHttpRequest();
} catch (e) {
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
};
//post
oAjax.open('post', 'http://' + hostName + ':' + port + '/entity/urlReq', true);
oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//post
oAjax.send(stringData);
oAjax.onreadystatechange = function () {
// 4 ，
if (oAjax.readyState == 4 && oAjax.status == 200) {
try {
//+ oAjax.responseText
console.log('data:' + oAjax.responseText);
} catch (e) {
// alert(' ' + e);
};
};
};
}Jquery Ajax 쓰기:
function getOrigantAjaxPost() {
var stringData = 'name=value1&pwd=value2'
$.ajax({
data: stringData,
async: true,
url: 'http://' + hostName + ':' + port + '/entity/urlReq',
type: "post",
processData: false, //tell jQuery not to process the data
contentType: "application/x-www-form-urlencoded",
success: function (data, status) {
// alert("Data: " + status);
console.log("Data: " + JSON.stringify(data) + " " + status);
},
error: function (e) {
// alert("Data: error" + JSON.stringify(e));
console.log('error ' + JSON.stringify(e));
}
});
}다음은 Nodejs 의 인터페이스 와 요청 작성 방법 을 살 펴 보 겠 습 니 다.
var http = require("http");
var url = require('url');
var express = require('express')
var bodyParser = require('body-parser');
//
var hostName = '192.168.56.1';
//
var port = 8092;
var app = express()
var urlencodedParser = bodyParser.urlencoded({ extended: false })
routes.post('/url', urlencodedParser, (req, res) => {
//
var params = req.body;
var user = {};
user.name = params.name;
user.pwd = params.pwd;
var response = { status: 1, data: user };
res.send(JSON.stringify(response));
res.end();
});
Nodejs 네 이 티 브 포스트 인터페이스 해석 쓰기:
const http = require('http');
// http http
http.createServer(function(req, res) {
if (req.method.toLowerCase() === 'post') {
var body = '';
req.on('data', function(chunk){
body += chunk;
});
req.on('end', function(){
if(req.headers['content-type'].indexOf('application/json')!==-1){
// JSON
JSON.parse(body);
} else if(req.headers['content-type'].indexOf('application/octet-stream')!==-1){
// Raw
// ……
} else if(req.headers['content-type'].indexOf('text/plain')!==-1){
// text
// ……
} else if(req.headers['content-type'].indexOf('application/x-www-form-urlencoded')!==-1){
// URL-encoded
// ……
} else {
//
}
})
} else {
res.end(' ');
}
}).listen(3000);Nodejs 요청 쓰기:
/**
* POST
*/
function urlPost() {
var http = require('http');
var querystring = require('querystring');
var contents = querystring.stringify({
name: 'nameuser',
pwd: '123'
});
var options = {
host: hostName,
port: port,
path: '/entity/req',
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Content-Length': contents.length
}
}
var req = http.request(options, function (res) {
res.setEncoding('utf8');
res.on('data', function (data) {
console.log("data:", data);//
});
});
req.write(contents);
req.end();
}두 번 째: application / json.
application / json 즉, 서버 에 알려 주 는 메시지 체 내용 형식 은 직렬 화 된 JSON 문자열 입 니 다. 예 를 들 어 {"name": "value 1", "pwd": "value 2"}.이 body 에서 JSon 형식 문자열 을 직접 분석 하면 매개 변수 데 이 터 를 얻 을 수 있 습 니 다.
다음은 자바 Spring MVC, Android OkHttp, Retrofit, JS Ajax, Nodejs 로 각각 이러한 방식 의 요청 과 인터페이스 작성 을 보 여 줍 니 다.
자바 의 Spring MVC 에서 Controller 인 터 페 이 스 를 작성 하여 application / json 이라는 데이터 형식 을 해석 하려 면 주석 에서 consumes 와 produces 를 application / json 형식 으로 정의 해 야 합 니 다.
@CrossOrigin
@RequestMapping(value = "/req", method = RequestMethod.POST,
consumes = MediaType.APPLICATION_JSON_VALUE
, produces = MediaType.APPLICATION_JSON_VALUE)
@ResponseBody
public String postReq(@RequestBody User user) {
System.out.println("req:" + user.getName() + " " + user.getPwd());
Gson gson = new Gson();
HashMap map = new HashMap<>();
map.put("name", user.getName());
map.put("pwd", user.getPwd());
return gson.toJson(map);
} Retrofit 정 의 는 @ Headers 주 해 를 추가 하고 Content - Type 을 설명 하면 됩 니 다.
//application/json
@Headers({"Content-Type: application/json", "Accept: application/json"})
@POST("req")
Call getRepos(@Body Entity entity); Android OkHttp 사용 방법 은 다음 과 같 습 니 다.
public static void okPost() {
OkHttpClient client = new OkHttpClient();
client.newBuilder()
.build();
//application/json
MediaType mediaType = MediaType.parse("application/json; charset=utf-8");
Gson gson = new Gson();
HashMap map = new HashMap<>();
map.put("name", "name1");
map.put("pwd", "pwd1");
String postString = gson.toJson(map);
RequestBody requestBody = RequestBody.create(mediaType, postString);
Request request = new Request.Builder()
.post(requestBody)
.url(url)
.build();
client.newCall(request).enqueue(new Callback() {
@Override
public void onFailure(Call call, IOException e) {
System.out.println("onFailure:" + e.getLocalizedMessage());
}
@Override
public void onResponse(Call call, Response response) throws IOException {
System.out.println("onResponse:" + response.body().string());
}
});
} Ajax 쓰기:
/**
* Ajax POST
*/
function getOrigantAjaxPost() {
var postData = '{ "name": "value1", "pwd": "value2" }';
var oAjax = null;
// HTTP
try {
oAjax = new XMLHttpRequest();
} catch (e) {
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
};
//post
oAjax.open('post', 'http://' + hostName + ':' + port + '/entity/req', true);
oAjax.setRequestHeader("Content-type", "application/json");
//post
oAjax.send(postData);
oAjax.onreadystatechange = function () {
// 4 ，
if (oAjax.readyState == 4 && oAjax.status == 200) {
try {
//+ oAjax.responseText
console.log('tryForm:' + oAjax.responseText);
// alert('readyState' + oAjax.status + " "
// + oAjax.responseText);
} catch (e) {
// alert(' ' + e);
};
};
};
}Jquery Ajax 쓰기:
/**
* Ajax POST
*/
function getOrigantAjaxPost() {
var postData = '{ "name": "value1", "pwd": "value2" }';
$.ajax({
data: postData,
async: true,
url: 'http://' + hostName + ':' + port + '/entity/req',
type: "post",
processData: false, //tell jQuery not to process the data
contentType: "application/json", //tell jQuery not to set contentType
success: function (data, status) {
// alert("Data: " + status);
console.log("Data: " + JSON.stringify(data) + " " + status);
},
error: function (e) {
// alert("Data: error" + JSON.stringify(e));
console.log('error ' + JSON.stringify(e));
}
});
}Nodejs 의 인터페이스 표기 법 은 body Parser. json 으로 만 바 뀌 면 됩 니 다.
var urlencodedParser = bodyParser.json({ extended: false })
routes.post('/url', urlencodedParser, (req, res) => {
//
var params = req.body;
var user = {};
user.name = params.name;
user.pwd = params.pwd;
var response = { status: 1, data: user };
res.send(JSON.stringify(response));
res.end();
});Nodejs 가 요청 한 쓰기:
/**
* POST
*/
function getAPost() {
var http = require('http');
var contents='{ "name": "value1json", "pwd": "value2" }';
var options = {
host: hostName,
port: port,
path: '/entity/req',
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Content-Length': contents.length
}
}
var req = http.request(options, function (res) {
res.setEncoding('utf8');
res.on('data', function (data) {
console.log("data:", data);//
});
});
req.write(contents);
req.end();
}다음은 마지막 으로 자주 사용 하 는 Post 요청 데이터 형식 을 보 겠 습 니 다.: multipart / form - data.
이 형식 은 주로 파일 업로드 에 사 용 됩 니 다. 물론 폼 내용 으로 데 이 터 를 입력 하여 제출 할 수 있 습 니 다. 각 폼 항목 간 에는 boundary 로 나 눌 수 있 습 니 다.
다음은 자바 Spring MVC, Android OkHttp, Retrofit, JS Ajax, Nodejs 로 각각 이러한 방식 의 요청 과 인터페이스 작성 을 보 여 줍 니 다.
자바 의 Spring MVC 에서 Controller 인 터 페 이 스 를 작성 하여 multipart / form - data 라 는 데이터 형식 을 해석 하려 면 주석 에서 consumes 와 produces 를 multipart / form - data 형식 으로 정의 해 야 합 니 다.
@CrossOrigin
@RequestMapping(value = "/upReq", method = RequestMethod.POST,
consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
@ResponseBody
public String uploadReq(@RequestPart(value = "file") MultipartFile multipartFile,
@RequestParam("description") String description) {
String fileType = multipartFile.getContentType();
String fileName = multipartFile.getOriginalFilename();
File file = new File("E:/file.jpg");
System.out.println(" ：" + fileType + " "
+ fileName + " " + description);
try {
multipartFile.transferTo(file);
return "success";
} catch (IOException e) {
e.printStackTrace();
return "failure";
}
}
@CrossOrigin
@RequestMapping(value = "/formReq", method = RequestMethod.POST,
consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
@ResponseBody
public String formDataReq(@RequestParam String name,
@RequestParam String pwd) {
System.out.println("formReq:" + name + " " + pwd);
Gson gson = new Gson();
HashMap map = new HashMap<>();
map.put("name", name);
map.put("pwd", pwd);
return gson.toJson(map);
} Retrofit 의 작성 방법 은 @ Multipart 주 해 를 추가 하고 매개 변 수 는 @ Part 로 주 해 를 하 는 것 입 니 다.
//multipart/form-data
@Multipart
@POST("req")
Call getRepos(@Part("description") RequestBody description,
@Part MultipartBody.Part file); Android OkHttp 의 쓰 기 는:
public static void okPost() {
OkHttpClient client = new OkHttpClient();
client.newBuilder()
.build();
//multipart/form-data
File file = new File("E:/img.png");
RequestBody fileBody = new MultipartBody.Builder()
.setType(MultipartBody.FORM)
.addFormDataPart("file", file.getName(),
RequestBody.create(MediaType.parse("image/png"), file))
.addFormDataPart("description", "description")
.build();
Request request = new Request.Builder()
.post(fileBody)
.url(formUrl)
.build();
client.newCall(request).enqueue(new Callback() {
@Override
public void onFailure(Call call, IOException e) {
System.out.println("onFailure:" + e.getLocalizedMessage());
}
@Override
public void onResponse(Call call, Response response) throws IOException {
System.out.println("onResponse:" + response.body().string());
}
});
}Ajax 표기 법 은:
/**
* Ajax POST
*/
function getOrigantAjaxPost() {
var oAjax = null;
// HTTP
try {
oAjax = new XMLHttpRequest();
} catch (e) {
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
};
var formData = new FormData();
formData .append("file", file); //
formData .append("description", "description");
//post
oAjax.open('post', 'http://' + hostName + ':' + port + '/entity/formReq', true);
// oAjax.setRequestHeader("Content-type", "multipart/form-data");
//post
oAjax.send(formData );
oAjax.onreadystatechange = function () {
// 4 ，
if (oAjax.readyState == 4 && oAjax.status == 200) {
try {
//+ oAjax.responseText
console.log('tryForm:' + oAjax.responseText);
// alert('readyState' + oAjax.status + " "
// + oAjax.responseText);
} catch (e) {
// alert(' ' + e);
};
};
};
}Jquery Ajax 쓰기:
/**
* Ajax POST
*/
function getOrigantAjaxPost() {
var form = new FormData();
form.append("file", file); //
form.append("description", "image");
$.ajax({
data: form,
async: true,
url: 'http://' + hostName + ':' + port + '/entity/formReq',
type: "post",
processData: false, //tell jQuery not to process the data
contentType: "multipart/form-data", //tell jQuery not to set contentType
success: function (data, status) {
// alert("Data: " + status);
console.log("Data: " + data + " " + status);
},
error: function (e) {
// alert("Data: error" + JSON.stringify(e));
console.log('error ' + JSON.stringify(e));
}
});
}Nodejs 인터페이스 쓰기, multipart 사용:
var multipartMiddleware = multipart();
routes.post('/url', multipartMiddleware, (req, res) => {
res.send("success:" + JSON.stringify(req.body) + " " + req.files.file.type);
res.end();
});Nodejs 요청 쓰기:
/**
* POST
*/
function getAPost() {
var http = require('http');
var formData = new FormData();
formData.append('file', fs.createReadStream("./filename.zip"));
formData.append('description', 'image');
var options = {
host: hostName,
port: port,
path: '/entity/req',
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data',
}
}
var req = http.request(options, function (res) {
res.setEncoding('utf8');
res.on('data', function (data) {
console.log("data:", data);//
});
});
req.write(formData);
req.end();
}다음은 주요 Http Post 의 데이터 전송 형식 이 각 언어 에서 의 용법 을 소개 합 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JPA + QueryDSL 계층형 댓글, 대댓글 구현(2)이번엔 전편에 이어서 계층형 댓글, 대댓글을 다시 리팩토링해볼 예정이다. 이전 게시글에서는 계층형 댓글, 대댓글을 구현은 되었지만 N+1 문제가 있었다. 이번에는 그 N+1 문제를 해결해 볼 것이다. 위의 로직은 이...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
