Verify and send parameters to server, then redirect to new page

by HYEONGJINKIM

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<h1>외부기관 랜딩페이지 예제</h1><br>
	<h3>※ 1번부터 차례대로 실행하여 응답이 온 후 다음 스텝을 진행하시기 바랍니다.</h3><BR>	
	<h3>1.페이지 유효성 확인, 파라메터 요청</h3>
	-기존 시간표 자료를 바탕으로 선택된 파라메터를 송신
	<br>
	<form class="reqajax" name="reqajax" method="post" accept-charset="utf-8">	
		<div>Language :</div><input type="text" name="Language" value="KO"> 고정) 언어
		<br>
	  <div>SourceSiteID :</div><input type="text" name="SourceSiteID" value="NAVER"> 고정) 출처
	  <br>
	  <div>F_PortID :</div><input type="text" name="F_PortID" value="1010"> 출발기항지ID
	  <br>
	  <div>F_PortSubID :</div><input type="text" name="F_PortSubID" value="0"> 출발딸림기항지ID
	  <br>
	  <div>T_PortID :</div><input type="text" name="T_PortID" value="1003"> 도착기항지ID
	  <br>
	  <div>T_PortSubID :</div><input type="text" name="T_PortSubID" value="0"> 도착딸림기항지ID
	  <br>
	  <div>VesselID :</div><input type="text" name="VesselID" value="COR1945588"> 선박ID
	  <br>
	  <div>MasterTime :</div><input type="text" name="MasterTime" value="2025-03-20 08:30"> 대표출항시간
	  <br>
	  <div>JourneyType :</div><input type="text" name="JourneyType" value="auto"> 여정종류 / auto:자동, round:왕복, oneway:편도
  	<br>
	  <input name="search" type="button" value="유효성 확인 및 랜딩파라메터 요청" onClick="javascript:fn_validChk();" style="width:510px; height:50px; font-size:15px;">	
	</form>
	<br>
	<br>
	<h3>2.응답된 데이터로 페이지 이동</h3>
	<form class="reqajax" name="form" method="post" accept-charset="utf-8">	
		<div>Language :</div><input type="text" name="Language" value="KO"> 고정) 언어
		<br>
	  <div>SourceSiteID : </div><input type="text" name="SourceSiteID" value="NAVER"> 고정) 출처
	  <br>
	  <div>pagename :  </div><input type="text" name="pagename" value="" id="pagename"> 
	  <br>
	  <div>searchdata :  </div><input type="text" name="searchdata" id="searchdata" value=''>
	  <br>
	  <input name="search" type="button" value="새창 열기" onClick="javascript:gotoJourney(this.form);" style="width:510px;...

CSS

h3,h1{
  		margin:0px;
  	}  	
		.reqajax {
			font-size:16px;
		}
    .reqajax div{ 
    	display:inline-block; 
    	width: 200px;
    	height: 30px;
    }

JavaScript

/****
	랜딩 예제
	이동수(02-6096-2242)
	1번
	****/
	
	//const KSA_SERVERURL = "http://localhost:8080/" //테스트
	const KSA_SERVERURL = "https://island.theksa.co.kr/" //실서버
		
	$(function(){
		$("form[name=form]").attr("action",KSA_SERVERURL +"/page/booking?sourcesiteid=NAVER" );
	});
	
	function gotoJourney(form) {
		form.target = "_blank";
		form.submit();
	}

	function fn_validChk(){
		var queryString = $("form[name=reqajax]").serialize() ;
		$.ajax({
			type : 'POST',
			url : KSA_SERVERURL +  "api/portal/selectGoToJourney",
			data : queryString,
			dataType : 'json',
			error: function(xhr, status, error){
				alert("실패",xhr,status, error);
			},
			success : function(json){
				alert("응답코드 : " + json.meta.errCode + "\n응답메시지 : " + json.meta.errMsg );
				
				//정상
				if(json.meta.errCode == 0){
						$('#pagename').val(json.documents.pageName);
						$('#searchdata').val(json.documents.searchData);
				}
			}
		});
	}