ajax 사용 샘플

----------------------------------------------------------------
script 영역
----------------------------------------------------------------

$("#goNext").on('click',function() {
if( $("#tbPart").find('input').filter((i,o) => !o.value).length > 0){
var $tEmptyInput = $("#tbPart").find('input').filter((i,o) => !o.value).eq(0);
var title = $tEmptyInput.parent('td').prev('td').text();
alert(title + '을(를) 입력해주세요.');
$tEmptyInput.focus();
return false;
}

$.ajax({
 url      : '/jsp/testpage.do'
   , data     : {
      'in_id' : $('#in_id').val()
    , 'in_date' : $('#in_date').val()
, 'in_typ' : $('#in_typ').val() 
, 'in_nm' : $('#in_nm').val()
, 'ord_nm' : $('#ord_nm').val()
, 'comm_req_svc_num' : $('#comm_req_svc_num').val()
, 'ord_num' : $('#ord_num').val()
, 'sec_date' : $('#sec_date').val()
, 'sec_num' : $('#sec_num').val()
, 'cli_num' : $('#cli_num').val()
, 'cli_cd' : $('#cli_cd').val()
, 'client_code' : $('#client_code').val()
 }  
   , type     : 'post'
   , dataType : 'json'
   , cache    : false
   , success  : function(data, stauts, request) {
   var url = '/teststart.do?p='+data.testdata+'&num=12';        
   if($("#tst_chk").prop('checked')){
   url += "&sec_chk=Y";
   }
   console.log(url);
   location.href = url;
   }
   , error    : function(request, status, error) {
   alert('Ajax url 오류');
   }
});
});

$(".testBtn").on('click',function() {
var testClk = $(this).attr("appl_form_seq");
console.log("### testClk : " + testClk);

// sms 테스트 발송
$.ajax({
 url      : '/test/testNext.do'
   , data     : {'testClk' : testClk}  
   , type     : 'post'
   , dataType : 'json'
   , cache    : false
   , success  : function(data, stauts, request) {
   if(data.result == 'Y') {
   alert("성공");
   } else if(data.result == 'N'){
   alert("오류");  
   } 
   }
   , error    : function(request, status, error) {
   alert('Ajax 오류');
   }
   , beforeSend  : function() { 
    
   }
   , complete  : function() { 
    
   }
});
});
 


});

반응형

----------------------------------------------------------------
layout 영역
----------------------------------------------------------------

<div>
<table id="tbPart">
<tr><td>ID </td><td><input type="text" id="in_id" name="in_id" value="테스트아이디"></td></tr>
<tr><td>IN DATE </td><td><input type="text" id="in_date" name="in_date" value="20230302121042"></td></tr>
<tr>
<td>CODE</td>
<td>
<select id="in_typ">
<option value="1">1번</option>
<option value="2">2번</option>
<option value="3">3번</option>
<option value="4">4번</option>
<option value="5">5번</option>
<option value="6">6번</option>
<option value="7">7번</option>
<option value="8">8번</option>
</select>
</td>
</tr>
<tr>
<td>테스트 </td>
<td id="tdTest">
</td>
</tr>
<tr><td>테스트명</td><td><input type="text" id="in_nm" name="in_nm" value=""></td></tr>
<tr><td>테스트번호</td><td><input type="tel" maxlength="11" id="ord_num" name="ord_num" value=""></td></tr>
<tr><td>두번째테스트명</td><td><input type="text" id="ord_nm" name="ord_nm" value=""></td></tr>
<tr><td>두번째테스트번호</td><td><input type="tel" maxlength="11" id="comm_req_svc_num" name="comm_req_svc_num" value=""></td></tr>
<tr><td>두번째테스트번호2</td><td><input type="tel" maxlength="11" id="sec_num" name="sec_num" value=""></td></tr>
<tr><td>두번째테스트번호3</td><td><input type="number" min="0" max="9999999999" id="cli_num" name="cli_num" value="123456"></td></tr>
<tr><td>테스트type</td><td><input type="text" maxlength="2" id="cli_cd" name="cli_cd" value="01"></td></tr>
<tr><td>두번째테스트type</td><td><input type="text" maxlength="1" id="client_code" name="client_code" value="I"></td></tr>
<tr>
<td align="center" colspan="2">
<input type="checkbox" id="tst_chk" ><label for="tst_chk">패스</label>
<button id="goNext">다음</button>
</td>
</tr>
</table>
</div>