안녕하세요 이제 막코딩을 배우기 시작한 사람입니다. 간단한 쇼핑몰을 만들고 있습니다. 쇼핑몰 메인페이지에서 4개의 상품을 누르면 같은 페이지 내에서 값만 변경하려고 노력중입니다. 그런데 누르면 계속 같은 값만 가져오네요.

    <script type="text/javascript">
        $(document).ready(function () {
            console.log(123123)
            product = window.location.href
            product_link = product.split('=')
            console.log(product.split('='))
            console.log(window.location.href)
            detail_page(product_link[1])
        })

        function detail_page(product_id) {
            console.log(123)
            $.ajax({
                type: "GET",
                url: "/detail?product=" + product_id,
                data: {},
                success: function (response) {
                    console.log(response);
                    let product_info = response['product_info'];
                    make_card(product_info['price'], product_info['code'], product_info['supply'], product_info['delivery'], product_info['tprice'])

                }
            })
        }

들어간 페이지 내에서는 콘솔을 보면 데이터는 가져오는거 같은데 왜 그럴까요.. [콘솔창]

(2) ["http://localhost:5000/product_detail?product", "product4"]
0: "http://localhost:5000/product_detail?product "
1: "product4"
length: 2
__proto__: Array(0)
product_detail?product=product4:30 http://localhost:5000/product_detail?product=product4 
product_detail?product=product4:35 123
product_detail?product=product4:41 
{msg: "상세페이지에 접근하였습니다..", product_info: {…}, result: "success"}
msg: "상세페이지에 접근하였습니다.."
product_info: {Tprice: 20900, code: "C004890", coupon: "0개", delivery: "무료배송", name: "product4", …}
result: "success"
__proto__: Object