안녕하세요 Ajax강의 잘듣고있습니다. 다름이 아니라 Ajax로 ... - 인프런

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")
      }
    });
});

고객정보부분에 제가 따로 검색기능을구현시도해보았습니다.

안녕하세요.
벌써 응용해서 고객부분을 하고 계시는걸보니 열정이 대단하시네요.

생각해보니, 위에 이야기하신 부분이 필요한듯 하네요.

우선 기본적으로 get 방식으로 처리할때는 아시겠지만
/v3/member_searchAjax?start_date=~~~
이런식으로 처리를 하게될거구요. (form 의 값을 스크립트에서 직접 받아서 입력)

post 방식을 사용할때는 data = data 에서, _data 에 form 의 값을 넣어주면 됩니다.
직접 스크립트로 받아와서 만들수도 있구요.
다음과 같이 jquery 함수를 사용하시면 form 의 모든 값들을 전과 동일한 submit 으로 넘길수가 있습니다.
구문 : let _data = $("#formId명").serialize(); // Form 의 내용을 전송파라메터로 전환

주말에 저도 관련해서 다른분들도 공부할 수 있도록 영상 만들어서 올려보겠습니다.

위 내용으로 먼저한번 해보시고 성공하시면 더 좋겠습니다.

인프런 커뮤니티 질문&답변

안녕하세요 Ajax강의 잘듣고있습니다. 다름이 아니라 Ajax로 검색할떄 시작일이나 종료일 고객명과 같은 검색조건을 어떻게 구현해야하는지 고민을해보다 질문드립니다.