작성
·
280
·
수정됨
1
package com.boot.sailing.v3.controller;
import com.boot.sailing.v3.service.MemberSvc;
import com.boot.sailing.v3.vo.Cust_info;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@Slf4j
@RestController
@RequestMapping ("/v3")
public class MemberAjax {
@Autowired
MemberSvc memberSvc3;
@RequestMapping("/member_searchAjax")
public List<Cust_info> list( @RequestParam("start_date") String strStartDate,
@RequestParam("end_date") String strEndDate,
@RequestParam("name") String strName, Model model
) {
List<Cust_info> list = memberSvc3.doSerch(strStartDate,strStartDate,strName );
return list;
}
}
$(document).ready(function(){
// 조회버튼클릭
$.ajax({
url : "/v3/member_searchAjax", // 파일경로
method : "GET", // GET, POST
contentType : "application/x-www-form-urlencoded",
//data : _data, // 서버에 전달할 Parameter
dataType: "json", // 서버에서 전달받을 Data 형식
async: false, // 비동기사용여부 true , false
success : function(data) { // 성공시 실행 (java try) , JSON.parse 자동적용 RespData
console.log(data)
let _contents=null;
for(let i in data) {
_contents += '<tr>\n' +
' <td><input type="checkbox" name="chkCoffeeNo" value="' + data[i].no + '"></td>\n' +
' <td>Ajax' + data[i].no + '</td>\n' +
' <td>' + data[i].cust_id + '</td>\n' +
' <td>' + data[i].name + '</td>\n' +
' <td>' + data[i].email + '</td>\n' +
' <td>' + data[i].role + '</td>\n' +
' <td>' + data[i].reg_day + '</td>\n' +
' </tr>'
}
$("#t_body").html(_contents);
},
error:function(request,status,error){ // 오류시 실행 (java catch)
console.log("code = "+request.status
+"message = "+ request.responseText
+"error = "+ error);
},
complete : function (){ // 성공/실패와 상관없이 실행 (java finally)
console.log("Finish")
}
});
});
고객정보부분에 제가 따로 검색기능을구현시도해보았습니다.
답변 2
2
1
안녕하세요.
벌써 응용해서 고객부분을 하고 계시는걸보니 열정이 대단하시네요.
생각해보니, 위에 이야기하신 부분이 필요한듯 하네요.
우선 기본적으로 get 방식으로 처리할때는 아시겠지만
/v3/member_searchAjax?start_date=~~~
이런식으로 처리를 하게될거구요. (form 의 값을 스크립트에서 직접 받아서 입력)
post 방식을 사용할때는 data = data 에서, _data 에 form 의 값을 넣어주면 됩니다.
직접 스크립트로 받아와서 만들수도 있구요.
다음과 같이 jquery 함수를 사용하시면 form 의 모든 값들을 전과 동일한 submit 으로 넘길수가 있습니다.
구문 : let _data = $("#formId명").serialize(); // Form 의 내용을 전송파라메터로 전환
주말에 저도 관련해서 다른분들도 공부할 수 있도록 영상 만들어서 올려보겠습니다.
위 내용으로 먼저한번 해보시고 성공하시면 더 좋겠습니다.
감사힙니다