Javascript 서버 요청 전 처리 방법

Javascript Validation 체크

처리 전 확인 창 띄우기

const saveYn = confirm("~를 등록하시겠습니까?");

if(saveYn == false) {
    return;
}

1자리 이상 입력 필수

const id = document.getElementById('id');
if(!id.value) {
  alert("아이디를 입력해주세요.");
  id.focus();
  return;
}

---

파라미터 처리 및 서버 요청

fost 요청 시 formData에 List 담아 보내기

const ctgryList = document.getElementsByName("ctgryList");

ctgryList.forEach((item) => {
    formData.append("ctgryList", item.value);
});

컨트롤러에서는 아래와 같은 파라미터로 List를 받을 수 있습니다.

@RequestParam List<String> ctgryList

javascript로 form submit

const form = document.createElement('form');
form.method = 'post';
form.action = '/URL주소';

const field = document.createElement('input');
field.type = 'hidden';
field.name = '인풋네임';
field.value = '값';

form.appendChild(field);

document.body.appendChild(form);

form.submit();

form과 input 요소를 생성하여 요청할 수 있습니다.

form 인풋 값 변경

const form =  document.getElementById("formID");
			
form.elements["inputName"].value = '값';

name 속성으로 인풋을 찾아서 값을 변경합니다.

체크박스 전송 시

<form name="Form명" id="Form명" method="post" onsubmit="return false;">
  <div class="toggle-wrap">
    <div class="toggle-btn">
      <input type="checkbox" class="checkbox" id="체크박스ID" name="체크Yn" value="N">
      <div class="knobs"></div>
      <div class="layer"></div>
    </div>
  </div>
</form>

체크박스 input은 checked 되지 않으면 서버에 전송되지 않습니다.

<form name="Form명" id="Form명" method="post" onsubmit="return false;">
  <input type="hidden" name="체크Yn" value="N"/>
  <div class="toggle-wrap">
    <div class="toggle-btn">
      <input type="checkbox" class="checkbox" id="체크박스ID" value="N">
      <div class="knobs"></div>
      <div class="layer"></div>
    </div>
  </div>
</form>

체크박스 input 대신 hidden input으로 전달하면 checked 되지 않은 값도 서버에 전송이 됩니다.

체크여부 전송 스크립트 예시

if ($("#체크박스ID").prop("checked")) {
  form.elements["체크Yn"].value = 'Y';
} else {
  form.elements["체크Yn"].value = 'N';
}

// form 전송 처리

컨트롤러에서 동일 name 다중 인풋 VO 자동 매핑 예시

@RequestMapping(value = "/구분/컨트롤러명.do")
public ModelAndView 컨트롤러명(HttpServletRequest req, HttpServletResponse res, VO클래스명 객체명) throws Exception {

  ModelAndView mav = new ModelAndView();

  // 컨트롤러 처리

  mav.setViewName("jsonView");
  return mav;
}

같은 name의 다중 인풋을 컨트롤러 파라미터에서 VO 내 배열 변수에 매핑시켜줄 수 있습니다.

@SuppressWarnings("serial")
public class VO클래스명 extends BaseVO implements Serializable {
  private String[] 체크Yn;

  public String[] get체크Yn() {
		if (this.체크Yn != null) {
			String[] tempData = new String[this.체크Yn.length];
			System.arraycopy(this.체크Yn, 0, tempData, 0, this.체크Yn.length);
			return tempData;
		} else {
			return null;
		}
	}

	public void set체크Yn(String[] 체크Yn) {
		if (체크Yn != null) {
			this.체크Yn = new String[체크Yn.length];
			System.arraycopy(체크Yn, 0, this.체크Yn, 0, 체크Yn.length);
		} else {
			this.체크Yn = null;
		}
	}
}