자바스크립트 ajax 질문 드려요

사이트를 만들면서 막히는 부분이 있어서 문의드립니다

현재 1번페이지에서 파라미터값을 넘긴다음 2번페이지에서 정보를 받아서

2번페이지에서 버튼을 클릭하여 데이터베이스에서 데이터를 가져와 화면에 보여지는 값들을 변경하려고 합니다

php로 데이터를 가져와 버튼을 3개를 만들었습니다

A    B    C     이 세개에 각각 데이터가 들어가 있고 이 버튼을 클릭했을때 

img src= 이 부분 이미지를 해당 버튼의 데이터에 맞는 이미지로 변경을 하고 싶습니다

현재는 변경은 되는데 새로고침이 되서요 새로고침을 안하고 하려면 ajax를 사용해야 한다는데

어떻게 스크립트를 짜야 하는지를 모르겠습니다

도움 부탁드립니다

<dd>
    <div class="di-title">
        <dl>
            <dt>
                <h1><?= $view_ph_name_device ?></h1>
                <a><?= $view_ph_name ?></a>
            </dt>
            <dd>
                <?php if ($view_t_img_tmp) { ?><img src="/data/com/<?= $view_t_img_tmp ?>"><?php } ?>
            </dd>
        </dl>
    </div>

<div class="di-info-box02" id="detailSelect">
        <?php
        $sql2 = "select it_id, t_idx, ph_name_device from " . $g5['product_table'] . " where ph_name_device = '" . $view_ph_name_device . "'";
        $que2 = sql_query($sql2);

        while ($row2 = sql_fetch_array($que2)) {
            $view_it_id = $row2['it_id'];
            $view_t_idx = $row2['t_idx'];
            $view_ph_name_device = $row2['ph_name_device'];

            $sql2 = "select idx, t_name from " . $g5['sample_table'] . " where (1) and idx = '" . $row2['t_idx'] . "'";
            $row2 = sql_fetch($sql2);
            $view_idx = $row2['idx'];
            $view_t_name = $row2['t_name'];?>
            <a href="javascript:menu_select_02('<?= $view_it_id ?>', '<?= $view_t_idx ?>', '<?= $view_t_name ?>');"
               <?php if ($view_idx == $ca_id2) { ?>class="active"<?php } ?>><?= $view_t_name ?></a>
            <?php
        }
        ?>
    </div>
</dd>

function menu_select_02(it_id, t_idx, t_name) {
   location.href = "/main/service/product_view.php?it_id=" + it_id + "&ca_id1=" + t_idx + "&ca_id2=" + t_idx + "&ca_name2=" + t_name;