[JS] Javascript 동적으로 데이터 불러오기, select 태그 사용하여 동적인 웹 사이트 구현

Node.js를 공부하면서 select 태그를 통해 상품을 선택할 때마다 해당하는 데이터의 정보를 동적으로 변경하고 싶었습니다.

 

데이터의 정보를 조회하기 위해서는

1) 선택된 상품의 pk값을 서버에 전달합니다.

2) 서버 측에서는 pk를 통해 데이터베이스에서 조회합니다.

3) 데이터베이스에서는 요청한 값을 서버로 반환합니다.

4) 서버에서 이를 다시 html에 적용하여 사용자들에게 보여줍니다.

 

<% if (haveMerchandise){ %>
<form id="orderForm" method="post">
    <table class="table table-bordered">
        <tr>
            <td rowspan="7" style="width: 65%;">
                <img id="productImage" src="/images/wait.png" alt="상품 이미지" style="width: 30%;">
            </td>
        </tr>
        <tr>
            <td>
                <label for="merId">상품 선택:</label>
                <select id="merId" name="merId" onchange="updateProductInfo()">
                <% var i = 0;
                    while(i<list.length){ %>
                        <option value="<%=list[i].mer_id%>"><%=list[i].name%></option>
                <% i += 1 } %>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <p id="productName">상품명 :</p>
            </td>
        </tr>
        <tr>
            <td>
                <p id="productBrand">브랜드 :</p>
            </td>
        </tr>
        <tr>
            <td>
                <p id="productPrice">가격 : </p>
                <input type="hidden" name="price" id="productPriceInput">
            </td>
        </tr>
        <tr>
            <td>
                <label for="quantity">수량:</label>
                <input type="number" id="quantity" name="qty" min="1">
            </td>
        </tr>
        <tr>
            <td>
                <button type="submit" formaction = "/purchase/payment">결제</button>
                <button type="submit" formaction = "/purchase/cart">장바구니</button>
            </td>
        </tr>
    </table>
</form>
<% } else { %>
    <table>
        <tr>
            <td>
                상품 준비중
            </td>
        </tr>
    </table>
<% } %>

 

select 태그 안에 option 태그는 value로 각 상품의 pk를 가지고 있고 ( list[i].mer_id ),
사용자에게는 상품의 이름 ( list[i].name )을 보여주고 있습니다.
이때 option 태그에서 원하는 데이터를 클릭 시 select의 value는 선택한 option 태그의 value 값을 가지게 됩니다.

 

<script>
async function updateProductInfo() {
	// select 태그 선택된 value 값
    var selectedMerId = document.getElementById('merId').value;

    fetch(`/purchase/manage/merchandise/${selectedMerId}`)
    .then(function(response) {
      // 응답이 성공적인지 확인
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      // JSON으로 파싱된 응답 반환
      return response.json();
    })
    .then(function(res) {
      // 상품 업데이트
      document.getElementById('productImage').src = res[0].image;
      document.getElementById('productName').innerText = '상품명: ' + res[0].name;
      document.getElementById('productBrand').innerText = '브랜드: ' + res[0].brand;
      document.getElementById('productPrice').innerText = '가격: ' + res[0].price + ' 원';
      document.getElementById('quantity').max = res[0].stock;

      // 상품 가격 hidden 필드에 설정
      document.getElementById('productPriceInput').value = res[0].price;
    })
    .catch(function(error) {
      console.error('Error fetching product data:', error);
    });
}
</script>

 

// node js
manageMerchandise : (req, res)=>{
    var merId = req.params.merId;

    db.query(`select * from merchandise where mer_id = ${merId}`, (err, result)=>{
      res.json(result);
    });
  },

 

1) 선택한 select 태그의 value를 통해 비동기 통신 fetch로 서버에게 데이터를 요청합니다.

2) response.json() 을 통해 응답 값을 JSON 형태로 반환합니다.

3) res에는 응답받은 값이 있으며 html 코드에서 데이터를 필요로 하는 위체에 적용해 줍니다.

3-2) document.getElementById('***').src, document.getElementById('***').innerText를 통해 값을 변경해 줍니다.

3-3) form태그에 담아 보내는 값인 price 필드는 document.getElementById('***').value를 통해 값을 저장합니다.

 

fetch 통신을 통해 select 태그를 선택할 때마다 위의 과정을 거치며 동적인 페이지를 보여주게 됩니다.