ajax, fetch 예시(+form data)

이러한 자료들을 각각 input값들로부터 추출하여 api호출시 데이터를 전송하려한다.

	let info = 
	{
		"no":document.querySelector('#no').value,,
		"my_name": document.querySelector('#my_name').value,
		"my_contact": document.querySelector('#my_contact').value,
		"my_birth": document.querySelector('#my_birth').value,
		"family_info": {
			"family_name": document.querySelector('#family_name').value,
			"family_contact": document.querySelector('#family_contact').value,
			"family_birth": document.querySelector('#family_birth').value
		},
		"friend_info": {
			"friend_name": document.querySelector('#friend_name').value,,
			"friend_contact": document.querySelector('#friend_contact').value,,
			"friend_birth": document.querySelector('#friend_birth').value,,
		}
	}

 

Ajax로 하는방법

	$.ajax({
		contentType: "application/json; charset=utf-8",
		url: strURL,
			dataType: 'json',
			data: JSON.stringfy(info),
			type: 'POST',
			cache: false,
			success: function(data){
				if(data.resultCode == 200){
					alert('테스트입력성공')
					alert(data)
				} else {
					alert("code:"+data.resultCode+"\n"+"message:"+data.resultMsg+"\n")
					
				}
			},
			error: function(request, status, error){
				// $('#scenario_list').append('<p><center>서버와의 연결에 문제가 있습니다.</center></p>');
				alert('실패')
		},
			complete: function(){
			}
	})

 

fetch로 하는방법

	let strURL = '/api/v1.0/scenario/0';

	const init = {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json; charset=utf-8',
			'dataType': 'json',
		},
		body: JSON.stringify(info)
	};

	fetch(strURL, init)
    	.then(res =>{
        	return res.json()
        })
		.then(res => { //위에서 return한 res.json()를 의미함
			if (res.resultCode == 200) { //API문서참고해야함 200을 뱉어내게 status일수도
				alert('성공')
				return res.json()//response객체에서 제공하는 json()으로 
                				//strURL(restfulAPI)결과 데이터를 제이슨형태로 가져옴(promise)
			} else {
				console.error(`HTTP ERROR! status${res.resultCode}`)
			}
		})
        .then(data){//여기서 data는 위에서 return한 값
        //data처리(data.resultData~)
        }
		.catch(err => {
			console.log(err)
		})

Ajax와 Fetch() 메서드

둘다 XMLHttpRequeset과 axios 라이브러리 같이 Request나 Response와 같은

HTTP 파이프라인을 구성하는 요소를 조작하는 것이 가능하다. 비동기 네트워크 통신으로 원격 API호출이 가능하다.

ajax는 제이쿼리 라이브러리로써 자바스크립트 번들파일크기만 늘려

브라우저 window객체에서 제공해주는 fetch() 를 쓰도록 하자. 단 몇가지 주의사항이 있다.

• fetch()로 부터 반환되는 promise객체는 HTTP error상태를 reject하지 않는다.  대신 ok상태가 false인 resolve가 반환되며 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환된다.
• fetch()는 쿠키를 보내거나 받지않는다. 쿠키를 전송하기위해서 자격증명(credientials)옵션을 반드시 설정한다.
• 인터넷익스플로어 지원불가

 

FormData

info를 다시보면 코드양이 너무 길고 일일이 값을 대입해 넣어줘야해서 여간 번거로운일이 아닐 수 없다.

FormData를 이용하면 이러한 단점들을 보완할 수 있다.

 

1차시도(fetch + formdata) 실패

이유는 input안에 name값을 안넣어줘서 Form안의 값들을 인식을못함

form태그 사용시 주의할점은 아래 포스팅을 참고하여 수정하였다.

https://dubaiyu.tistory.com/176?category=937661 

[python] form 태그로 직접 insert를 해보자

 

2차시도 성공

 

	def post(self, scenario_no):
		""" 점검장비 측정 자동화 시나리오 API : 점검장비 측정 자동화 시나리오 신규 등록

		Args:
			scenario_no ([int]): 무조건 0

		Returns:
			[response]: 점검장비 측정 자동화 시나리오 API 호출에 대한 JSON 응답 결과
		"""

		result = self.checkSession() # 세션 확인
		if result != None:
			return self.responseResult(result)

		if not request.is_json:
			result = { "resultCode": 400, "resultMsg": "has no scenario info" }

		scenario_info = request.get_json()
		eap_info = scenario_info.get('eap_info')
		erfp_info = scenario_info.get('erfp_info')

		scenario_model = ScenarioModel(current_app.config['DB_URL'])
		result = scenario_model.insert(self.member_no, scenario_info, eap_info, erfp_info, scenario_no)
		return self.responseResult(result)

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

https://www.daleseo.com/js-window-fetch/

[자바스크립트] fetch() 함수로 API 호출하기