inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

스프링 부트 웹 개발 입문 - 따라하며 배우기

Ajax - 서버에서 Json 만들기

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

346

성문

작성한 질문수 86

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

 

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

 

 

spring mvc spring-boot

답변 2

2

IT늦공 김부장

문의 주신 부분 강의로 올렸습니다.

도움이 되시길 바래요 ~

0

성문

감사힙니다

1

IT늦공 김부장

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

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

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

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

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

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

마이바티스 환경설정 조회하기 강의 부분에서 메뉴부분에러

0

57

2

자바 8버전이 선택지에 없는데 어떻게 하죠

0

71

2

zip파일 다운받아서 풀었는데도 계속 오류가 생기네요

0

182

2

가격 수정만 자꾸 에러페이지로 갑니다...ㅜ

0

266

2

오류가 이렇게 뜨는데

0

496

1

타임리프 > jsp

0

96

1

File imprt 어떤거 해야하죠?

0

127

1

검색기능이 안됩니다

0

141

2

검색기능이 안됩니다

0

173

3

500에러

0

168

2

v2 객체 만드는중 입니다

0

123

2

오류가 자꾸 나는데 왜이러는 걸까요?ㅠㅠ

0

239

5

오류가 왜 나는건지 모르겠어요

0

150

2

스프링 부트 버전

0

168

2

log.info가 적용이 안되는 문제

0

171

1

Spring Boot에서 jsp 연동 오류

0

317

1

7장 insert mapper erro 문의합니다

1

246

2

선생님 혹시 파일업로드도 알려주실수있나여?

2

593

1

선생님 혹시 세션하고 쿠키 부분 언제쯤 올려주실수있나여?

1

195

1

스프링 부트 2.x 버전 지원 중단, myBatis 추가가 안돼요

0

879

1

커뮤니티 버전에서 스프링 부트를 선택할수 없습니다.

1

346

1

DB 생성시 발생 에러 관련! "Can't create table" "Error No 150. "Foreign key constraint is incorrectly formed")

1

525

0

int i = menuService.doInsert(coffee,kind,price); 이 코드 질문있어요

1

375

1

@Data 인식 문제

0

286

2