How to submit multiple forms in a same page with jQuery/Ajax and get multiple return values via json. (e-commerce site)
쇼핑몰에서 고객이 상품을 장바구니에 담고 그 값을 다른 페이지에서 처리한 뒤 다시 상품 페이지로 돌아가 페이지가 리프레시된다면 썩 좋은 방법은 아니다. (아니면 같은 페이지에서 DB 처리를 할 수도 있겠지?)
그래서, 화면을 리프레시하지 않고 어떤 결과값을 받아오기 위해 사용되는 것이 ajax다.
위의 그림에서 보듯이 상품목록에는 여러 개의 form 값이 들어가게 된다.
이걸 ajax로 전송하려면 어떻게 해야할까?
그리고 여러 개의 결과값을 받으려면 어떻게 해야할까?
구글링을 하다가 몇 가지 힌트를 얻어 정리해 본다.
참고 : http://www.9lessons.info/2009/06/submit-multiple-forms-jquery-ajax.html
http://stackoverflow.com/questions/4594265/multiple-return-values-from-php-with-jquery-ajax
1. 우선 각 form 및 input 값들은 Id 값을 뒤에 붙여 구분한다.
2. "장바구니" 버튼은 class 명으로 ajax에서 사용한다.
3. '장바구니에 담았다는 메시지'와 '장바구니에 담긴 수량의 합' 두 가지 결과값은 json_encode를 통해서 처리한다.
아래에서 빨간 색의 200, 201은 임의로 붙인 Id 값이다.
(DB에서 불러올 때 상품의 고유번호를 붙여줘도 좋다.)
상품 1은 옵션이 있고, 상품 2는 옵션이 없는 상품이다.
jquery 파일은 CDN을 이용하거나 혹은 직접 다운받아 링크를 걸어주면 된다.
상품 목록 페이지(list.php)
<html>
<head>
<title>jQuery and Ajax</title>
<script src="jquery-min.js"></script>
<script src="addCart.js"></script>
</head>
<body>
<!-- add to cart and show return value via json. -->
<p>
<a href="#" >Cart : <span id="cartInfo"></span> </a>
</p>
<!-- items list
num_ is unique number of item 1 (could be getting from DB) -->
<form name="form_200" method="post">
<input type="hidden" id="num_200" value="1234" />
<input type="hidden" id="price_200" value="1000" />
<a href="#">item 1</a>
<select id="selected_opt_200" />
<option name="option1">Red</option>
<option name="option2">Blue</option>
</select>
<input type="text" id="quantity_200" />
<input type="submit" id="200" class="addCart_submit" value="cart" />
<div id="loadResult200"></div>
</form>
<form name="form_201" method="post">
<input type="hidden" id="num_201" value="5678" />
<input type="hidden" id="price_201" value="2000" />
<a href="#">item 2</a>
<input type="submit" id="201" class="addCart_submit" value="cart" />
<div id="loadResult201"></div>
</form>
</body>
</html>
아래는 ajax로 처리하기 위한 스크립트 파일이다.
jQuery 페이지 (addCart.js)
$(document).ready(function() {
$(".addCart_submit").click(function(){
var element = $(this);
var Id = element.attr("id"); // unique id from 'add to cart' button
var qty = $("#quantity_"+Id).val(); // get order quantity
if(qty=='') {
alert("Enter quantity");
} else {
if($("#selected_opt_"+Id).val()) { // if option is
$.ajax({
type : "POST",
url : "/path/cart.php",
data : { // declare data to send to cart.php
num : $("#num_"+Id).val(), // unique number of item
qty : qty, // quantity
selected_opt : $("#selected_opt_"+Id).val(), // option
amount : $("#price_"+Id).val() // price
},
dataType :"json", // get return values from server via json
cache: false,
success: function(data){
// console.log(data); // while debugging show values on console window
$("#loadResult"+Id).html(data.msg); // returned success message
$("#cartInfo").html(data.qty); // returned quantity in cart from server
}
});
}else{ // 옵션이 없는 경우
$.ajax({
type : "POST",
url : "/path/cart.php",
data : {
num : $("#num_"+Id).val(),
qty : qty,
amount : $("#price_"+Id).val()
},
dataType :"json",
cache: false,
success: function(data){
// console.log(data);
$("#loadResult"+Id).html(data.msg);
$("#cartInfo").html(data.qty);
}
});
}
}return false;
});
});
그리고 서버 쪽의 PHP 파일이다. (cart.php)
<?php
$conn = connect to DB;
...
$sql = "INSERT INTO cart (num, amount, quantity, option) VALUES ('$num', '$amount', '$qty', '$selected_opt' );
$result = mysqli_query($conn, $query);
if($result) {
$msg = "<script>window.alert('Saved');</script>";
//retrieve quantity in cart from DB
$sql2 = "SELECT sum(quantity) AS qty FROM cart ";
$result2 = mysqli_query($conn, $sql2);
$row = mysqli_fetch_array($result2);
echo json_encode(array("msg"=>$msg, "qty" => $row['qty']));
//echo $msg; // if you don't return multiple values, just return one value
}
?>
이렇게 서버 쪽에서 처리를 하면 성공했다는 메시지를 클라이언트 쪽으로 보내는데 그 메시지는 <div id="loadResult_Id"></div> 에 jQuery를 통해 삽입된다.
그리고 장바구니에 담긴 수량 또한 <span id="cartInfo"></span>에 삽입된다.
이렇게 하나의 페이지에서 여러 개의 폼이 있을 때 ajax로 전송하는 방법 그리고 반대로 서버 쪽에서도 여러 개의 결과값을 반환해야 할 때 json 을 사용해서 한다는 것을 알았다.
'jQuery' 카테고리의 다른 글
| JQuery 호환성 확보 (0) | 2016.05.25 |
|---|---|
| [jQuery] 기본 문법 정리 (0) | 2013.12.30 |
| 모바일 웹앱의 현주소 (0) | 2013.12.30 |
| 이미지를 모바일 해상도에 맞게 조절하기 (0) | 2013.10.11 |
| [jQuery mobile] back 버튼을 누르면 강제로 refresh 하기 (0) | 2013.04.05 |