September 18, 2022

Ajax html 페이지 가져오기

간단한 Ajax 로 페이지 가져오기 예제

자세한 내용은 Ajax + Django로 한 페이지에서 다른 html 띄우기 에서 읽어보세요!

<button id='listButton'></button><div id='example'></div>

해당 페이지에 아래 스크립트를 추가하면 , example 로 지정한 div에 결과 내용이 출력되게 되어 있다. 접속 주소만 쓰면, 활용할 수 있다.

로딩중 처리를 위해서 “LoadingOverlay”라는 라이브러리를 활용하는 것도 같이 넣어 봤다.

$('#listButton').click(function() {// Show full page LoadingOverlay        $.LoadingOverlay("show");        $.ajax({            type: "GET",            url:"{% url 'result_list' %}", // list url을 불러옴            dataType: 'html', // list의 형태는 html            success: function(data){ // 성공했을 때 일단 good을 alert로 띄운다.                alert('good');                $('#example').html(data) // 그 이후에 example div에 list html의 data를 가져온다.            },            error: function(request, status, error){ // 실패했을 때 bad alert, 에러가 무엇이었는지, 그리고 간단한 html 출력                alert('bad');                alert(error);                $('#example').html('AJAX 통신에 실패했습니다.');            }        })        $.LoadingOverlay("hide");});

페이지 로딩 중 자바스크립트

JQuery를 이용한 로딩 처리, 아래 페이지에 예와 라이브러리 참고하자!

[

jQuery LoadingOverlay – Gaspare Sganga

A flexible loading overlay jQuery plugin

Gaspare SgangaGaspare Sganga


](https://gasparesganga.com/labs/jquery-loading-overlay/#examples)

September 15, 2022

Javascript – select box 다루기

맨날 봐도 또 보고 해야 한다. 머리로 다 안외워져

JQuery, javascript 로 select input 다루기

[

jquery – select option 선택값 가져오기

[jquery] select box 선택값 가져오기 // select box ID로 접근하여 선택된 값 읽기 $(”#셀렉트박스ID option:selected”).val(); // select box Name로 접근하여 선택된 값 읽기 $(“select[name=셀렉트박스name]”)..

TISTORY오잉봉


](https://oingbong.tistory.com/175)

// select box ID로 접근하여 선택된 값 읽기
$(“#셀렉트박스ID option:selected”).val();
// select box Name로 접근하여 선택된 값 읽기
$(“select[name=셀렉트박스name]”).val();
// 선택된 값의 index를 불러오기
var index = $(“#셀렉트박스ID option”).index($(“#셀렉트박스ID option:selected”));
// 셀렉트 박스에 option값 추가하기
$(“#셀렉트박스ID”).append(“<option value=’1′>1번</option>”);
// 셀렉트 박스 option의 맨앞에 추가 할 경우
$(“#셀렉트박스ID”).prepend(“<option value=’0′>0번</option>”);
// 직접 index 값을 주어 selected 속성 주기
$(“#셀렉트ID option:eq(1)”).attr(“selected”, “selected”);
// value 값으로 selected 속성 주기
$(“#셀렉트ID”).val(“1”);
$(“#id”).val(“1”).prop(“selected”, true);
// 첫번째, 마지막 item 삭제하기
$(“#셀렉트ID option:first”).remove();
$(“#셀렉트ID option:last”).remove();

September 7, 2022

Javascript – onsubmit 함수 만들기

form submit 이전에 자바스크립트로 먼가를 체크하거나, 경고창을 띄워주기 위해 submit 전에 함수를 먼저 호출해서 처리할 수 있도록 해보자.

너무 기본적인 내용이지만, 코드를 중심으로 남겨둔다.

먼저, html 코드에는 onsubmit 이벤트를 넣어 두도록 한다. 코드를 보자.

<form class="user" method="post" name="form1" onsubmit="return submit_form();">    ...    <input  autocomplete="new-password" class="form-control form-icon-input" type="password" id="id_password1" name="password1" placeholder="Password" required>    <input  autocomplete="new-password" class="form-control form-icon-input" type="password" id="id_password2" name="password2" placeholder="Password" required></form>

여기서 중요한 것은 form 태그에 있는 onsubmit="return submit_form();" 이랑 form name 이다. 이렇게 해두고 아래와 같이 javascript 코드를 추가하면 원하는 대로 할 수 있다.

<script type="text/javascript">    function submit_form() {        var form = document.form1;        if (form.password1.value != form.password2.value) {            alert("패스워드를 확인해주세요!");            form.password2.focus();            return false;        }        text="사용자 등록을 진행하시겠습니까?";        if (!confirm(text)) {            return false;        }        return true;    }</script>

리턴을 false 로 하면 form.submit() 을 수행하지 않으므로 맘대로 로직을 짜서 활용해 보세요 😀

참고 코드

크롬에서 자동완성이 되지 않도록 하고 싶다면, 아래 코드를 html 태그에 에 추가하면 된다. 위의 예제에서 살펴 볼 수 있다.

 autocomplete="new-password" 

@vdekr9