인프런 커뮤니티 질문&답변

Mr. Leo님의 프로필 이미지
Mr. Leo

작성한 질문수

Node.js 웹개발로 알아보는 백엔드 자바스크립트의 이해

Ajax 구현부분 질문입니다.(중간체크 진행중 발생, 검색창만들기)

해결된 질문

작성

·

271

0

/html의 내부 script.

async function sendAjax (url, data){
       var data = {"search" : data}  //넘겨주는 data값 
       var dataInfo1 = {
                method : "POST",  //메소드 반드시 지정해줘야 app.js 파일에서 찾을수 있음.
                body : JSON.stringify(data),
                headers : {
                    "Content-Type" : "application/json"
                }
            };

        const res = await fetch(url, dataInfo1);    
        const result = await res.json();

        console.log(result);
        if(result.result === "ok"){
                console.log("2", result.search)
                document.querySelector(".showSearch").innerHTML = result.search;
        }
   }

위의 넘겨주는 data의 key 값을 "search-value" 로 변경하고 아래 주석처리한 값이 undefind으로 뜹니다(console.log("1",req.body."search-value"); //undefind)

//<app.js>

app.post('/search', (req, res)=>{
    // console.log("1",req.body."search-value"); //undefind
    console.log(req.body);
    var responseData1 = {'result' : 'ok', 'search' : req.body.search};
    res.json(responseData1);
})

responseData1의 두번째 키 값인 'search-value'로 하면 undefind으로 계속가져와서 결국 키값을 search로 바꿨는데요..

AJAX 통신할때 보내는 데이터의 키값을 작성해야하는 규칙이 있는건가요? 

답변 1

1


객체의 key값을 참조하시려고 할때  string 으로 적어주셔서 그러신거같아요. 
string으로 참조하시고 싶으시면 [ ] 를 써서 접근하시면 될거예요. 
그리고 js 에서 변수명은 camelcase 로 작성하셔야 합니다. ( 하이픈은 (-) 은 유효하지 않습니다. )

ex>
const obj = {};
obj.a = 'a';

// 참조시

console.log( ob.a ); // 'a'

console.log( ob['a'] ); // 'a'


// 정의시에는 camelcase 적용하기

obj.b-is = 'b'; // Uncaught ReferenceError: Invalid left-hand side in assignment
obj.bIs = 'b';

 

Mr. Leo님의 프로필 이미지
Mr. Leo

작성한 질문수

질문하기