코삼
190
2020-04-08 13:32:14
4
475

ajax로 생성한 form태그의 정보를 컨트롤러단으로 보내고 싶습니다


안녕하세요.

버튼a를 클릭시 이벤트로 

ajax를 사용해 form태그와 버튼b를 포함한 태그들을 생성


	$(function(){
		$(document).on("click","#QuickViewBtn",function(){

			var data = {
					  p_number : $(this).attr("value")
			  };
			$.ajax({
				method:"get",
				url:"/shoping/productViewQuick",
				data:data,
				async:false,
				error:function(xhr,status,error){
					alert(error);
					alert("er");
				},
				success:function(data){
					function numberWithCommas(x) {
						console.log("numberWithCommas");    
						return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
					};

					$.each(data.slice(0, 1), function(key, data){
				
					
					tag = tag + "<form:form role='form' method='post' id='buyForm' >";
					tag = tag + "<div class='wrap-num-product flex-w m-r-20 m-tb-10' >";					
					tag = tag + "<input type='hidden' name='p_number' value='"+data.p_number+"'>";
					tag = tag + "<div id='minus' value='"+data.p_price+"' class='btn-num-product-down cl8 hov-btn3 trans-04 flex-c-m'>";
					tag = tag + "<i class='fs-16 zmdi zmdi-minus'></i>";
					tag = tag + "</div>";
					tag = tag + "<input id='b_amount' readonly class='mtext-104 cl3 txt-center num-product' type='number' name='b_amount' value='0'>";
					tag = tag + "<div id='plus' value='"+data.p_price+"' class='btn-num-product-up cl8 hov-btn3 trans-04 flex-c-m'>";
					tag = tag + "<i class='fs-16 zmdi zmdi-plus'></i>";
					tag = tag + "</div>";
					tag = tag + "</div>";
					tag = tag + "<span class='label-input100'>최종가격</span>";
					tag = tag + "<input id='finalPrice' type='text' class='form-control m-3' style='width: 50%;' value='0' readonly >";
					tag = tag + "<div>";
					tag = tag + "<button id='cart' class='stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04 js-addcart-detail' type='button' style='float: left;'>장바구니</button>";
					tag = tag + "<button id='buy' class='stext-101 cl0 size-101 bg1 bor1 hov-btn1 p-lr-15 trans-04 js-addcart-detail' type='button'>구입하기</button>";
					tag = tag + "</div>";
					tag = tag + "</form:form>";
					
					$("#quickViewModal").html(tag);
					 console.log("quickViewModal탐");
					});
			}
		});
	})
})


form태그에 정보 입력 후 장바구니 혹은 구입하기 버튼을 누르면

스크립트 c가 form태그내의 정보를 받아서( var form = $('#formID'); 이런식으로.)


$(document).on("click","#cart",function(){
			console.log("장바구니 버튼 클릭함");
			var b_amount=$("#b_amount").val();
			if(b_amount==0){
				Swal.fire('장바구니','구매수량을 입력해 주세요','error');
			}else if(b_amount!=0){
				console.log("장바구니 1개이상일때 1번");
				var form = $('#buyForm');
				console.log(form);
				form.attr("action",
						"/shopping/cart/addCart");
				form.attr("method","get");												
				form.submit();
				$("#hideModal").trigger("click");//모달 닫는 버튼을 강제실행
				$("#b_amount").val(0);//값 초기화
				$("#finalPrice").val(0);
				console.log("장바구니 1개이상일때 2번");
			}
			
		});


컨트롤러단으로 보내는데요.

컨트롤러단에서 메소드 타면 바로 System.out.println으로 메소드를 타는걸 확인하려 했는데

아예 전송이 안됩니다. 컨트롤러단의 메소드를 안 타는것 같아요.


$(document).on("click","#cart",function(){
			console.log("장바구니 버튼 클릭함");
			var b_amount=$("#b_amount").val();
			if(b_amount==0){
				Swal.fire('장바구니','구매수량을 입력해 주세요','error');
			}else if(b_amount!=0){
				console.log("장바구니 1개이상일때 1번");
				var form = $('#buyForm');
				console.log(form);
				var data = form;
				console.log(data);
				$.ajax({
					url:"/shopping/cart/addCart",
					type:"get",
					data:data,
					success:function(){
						console.log("장바구니ajax 성공");
					}
				});
			}
		});

이런식으로 스크립트를 바꿔봤는데, 그랫더니 컨트롤러의 메소드는 타지만 값이 안들어가 null오류가 뜹니다..

처음에는 ajax로 폼 태그가 만들어지기 전에 스크립트가 로딩되서 그런건가 했는데 아닌것같고..

뭐가 잘못되서 안되는건지 조차 감이 안잡힙니다. 조언 조금만 부탁드립니다.

0
  • 답변 4

  • onimusha
    9k
    2020-04-08 14:45:56


    data : form.serialize() // 으로 전송하면 어떻게 나오나요?


  • 코삼
    190
    2020-04-08 15:26:01

    onimusha

    님 댓글 감사합니다. 말씀해주신데로 해봤는데 여전히 form태그의 값이 전송이 안되는것 같습니다. 컨트롤러 타긴 하는데, 인자값에 null이 들어갔다고 나오네요.

  • 원푠듯
    290
    2020-04-08 16:06:30

    form 요소 생성하실 때, <form:form>이라고 하면 form 태그로 인식 안 하지 않나요? (방금 테스트하기론 인식 안 하네요)

    아마 스프링 템플릿 문법을 그대로 가져오신 듯한데, jQuery가 이를 form 태그로 인식하지 못해서 데이터를 못 불러온 것 같습니다. form:form 말고 form으로 해보세요.

  • 코삼
    190
    2020-04-08 17:58:58

    원푠듯

    다른방식으로 돌려서 값 넣었습니다!

    답글 감사합니다 form:form이 안먹힐줄은 몰랐네요. 다음에 할 땐 form 하나로 해보겠습니다~


  • 로그인을 하시면 답변을 등록할 수 있습니다.