[JSP/Button] button 사용 시 자동으로 submit 막기

QR코드 생성을 구현하고 있는데 전혀 redirect가 될 일이 아닌 애가 redirect가 돼서 나를 괴롭히더라...

 

작성중이었던 코드

qr.jsp

<!-- QR 코드를 생성할 주소 정보 입력 -->
<input type="text" id ="qrurl" name="qrurl"/>
<button class="button" onclick="fn_qr();">QR 생성</button>

<!-- QR 코드 표시 영역 -->
<div class="qrResult" id="qrResult"></div>

qr.js

function fn_qr(){

    let url = $("#qrurl").val();

    $.ajax({
        type:"GET",
        url:"/qr.do",
        data:{url:url},
        success : function(data){
            if(data){
                let imgSrc = "data:image/png;base64," + data;
                let imgTag = "<img src=\"" + imgSrc + "\" alt=\"QR Code\">";
                $("#qrResult").html(imgTag);
            }
        }
    });

}

 

전혀 redirect 될 일이 없을 거라고 생각했는데 자꾸 redirect가 돼서 불러왔던 QR도 다시 초기화가 되더라 ㅠㅠ

하지만? 원인은 생각보다 단순한 이유였다

 

button 태그 사용 시 type = "button"을 하지 않으면 자동으로 submit 돼서 그랬던 것!

수정한 코드

<!-- QR 코드를 생성할 주소 정보 입력 -->
<input type="text" id ="qrurl" name="qrurl"/>
<button type="button" class="button" onclick="fn_qr();">QR 생성</button>

<!-- QR 코드 표시 영역 -->
<div class="qrResult" id="qrResult"></div>

 

이렇게 바꿔주었더니

성공!