팝업창 띄우고 포스트로 이동 시키기 Jquery Post Popup

웹개발을 하다보면, 팝업을 띄워서 보여주는 경우가 많다. 

그런데, 팝업을 띄우지만 해당 파라미터를 보여주고 싶지 않을 때가 있다. 

(또는 마음대로 접근하지 못하도록 하고 싶을 때도...) 

그 때 사용할 수 있는 소스다.

uTdata 함수를 실행시키면, 팝업이 뜨면서 submit 동작을 한다.

아래와 같이 사용할 수 있으며, 팝업에는 항상 target을 지정해 주어야 한다.

 

function post_to_url(path, params, target, method) {

    method = method || "post";

    target = target || null;

 

    var form = document.createElement("form");

    form.setAttribute("method", method);

    form.setAttribute("action", path);

    if (target != null)

        form.setAttribute("target", target);

 

    for (var key in params) {

        var hiddenField = document.createElement("input");

        hiddenField.setAttribute("type", "hidden");

        hiddenField.setAttribute("name", key);

        hiddenField.setAttribute("value", params[key]);

        form.appendChild(hiddenField);

    }

    document.body.appendChild(form);

 

    form.submit();

    return false;

}

 

function uTdata(id, opt) {

    var _opt = opt || "u";

    var _id = id || null;

    if (_id == null)

        return;

 

    var url = StringFormat("{{url_for('form.update')}}");

 

    window.open("", "tnpdataUpdate", "menubar=0, toolbar=0, scrollbars=1, status=1, width=830, height=800, resizable=0");

    post_to_url(url, { "id": _id, "opt": _opt }, "tnpdataUpdate", "post");

 

}

 

추가적으로 ajax 호출 할 때 csrf 토큰을 항상 보내줘야하는데, 매 번 가져오기 귀찮을 때 하는 방법

<meta name="csrf-token" content="{{ csrf_token() }}">

 

<script type="text/javascript">

    var csrftoken = $('meta[name=csrf-token]').attr('content')

    $.ajaxSetup({

        beforeSend: function (xhr, settings) {

            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {

                xhr.setRequestHeader("X-CSRFToken", csrftoken)

            }

        }

    });

</script>

위와 같이 셋팅해주면, 비동기 호출 전 헤더에 csrf토큰을 항상 넣어줄 수 있어 편하다.