Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- EJS
- innerText
- React
- Frontend
- html
- json
- Video
- CSS
- javascript
- QueryString
- node
- Front-End
- Javasript
- url parsing
- node.js
- Emulator
- jstree
- jquery
- Express
- password
- vue
- github
- ajax
- Cloud
- module
- DataTable
- insertAdjacentHTML
- Excel
Archives
- Today
- Total
Developer's blog
[JavaScript] Ajax에서 Post 이용하여 데이터 받아오기(Query String 이용) 본문
나는 기존에 post 방식을 이용하여 데이터를 받아오기 위해서는 아래와 같은 방식을 사용하였다.
const q = {
page: "1",
startDate: "2021-09-08",
endDate: "2021-09-30",
length: "10",
selectOption: "",
searchText: ""
}
const sendInfo = {
data: encryptByAESModeCBC(Json.stringfy(q)
}
$.ajax({
url: HOST+"/admin/login/log",
type: "POST",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(sendInfo),
dataType: "json",
success:function(data, textStatus, request) {
console.log(data);
},
error:function(data, textStatus, request) {
console.log("Error: ");
console.log(data);
}
});
하지만 해당 방법을 사용하니 서버에서의 응답은 데이터가 없다는 뜻의 Null 값만 반환할 뿐이다.
그 이유은 데이터에 대한 Query String을 진행하지 않은채 서버에 전송을 했고 이에 따라 서버가 정상적인 응답을 하지 않고 있었던 것이다. 따라서 나는 검색 결과로 아래의 블로그를 보게 되었고 Query String을 진행하는
const queryString = Object.entries(q).map(e => e.join('=')).join('&');
이 코드를 추가함으로써 해결할 수 있었다! (코드를 사용하니 정상적인 데이터 Response을 받을 수 있었다!)
최종 Code
const q = {
page: "1",
startDate: "2021-09-08",
endDate: "2021-09-30",
length: "10",
selectOption: "",
searchText: ""
}
const queryString = Object.entries(q).map(e => e.join('=')).join('&');
const sendInfo = {
data: encryptByAESModeCBC(queryString)
}
$.ajax({
url: HOST+"/admin/login/log",
type: "POST",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(sendInfo),
dataType: "json",
success:function(data, textStatus, request) {
console.log(data);
},
error:function(data, textStatus, request) {
console.log("Error: ");
console.log(data);
}
});
Server Response

Reference :
자바스크립트 객체를 쿼리스트링 값으로 바꾸기
자바스크립트를 사용하여 API를 호출하는 경우 서버에 값을 전달해야 하는 경우가 있죠. 이때 객체로 된 값을 쿼리스트링(QueryString)으로 변환하려면 어떻게 해야하는지 알아봅니다.
webisfree.com
'FrontEnd > Ajax' 카테고리의 다른 글
Ajax 요청 시 dataType과 contentType (0) | 2023.01.31 |
---|---|
[JavaScript] ajax에서 값 받아와 json Data 만들기 (0) | 2021.10.19 |