fancybox 사용시 iframe type 으로 사용하면 해당 href 에 있는 주소로 get 방식으로 페이지를 불러온다.
하지만 post 방식으로 값을 넘겨서 페이지를 불러와야할 경우가 발생했는대 구글링을 통해서 방법을 찾을수있었다.
출처는 http://stackoverflow.com/questions/14316054/post-preview-passing-data-with-ajax-and-fancybox
방법은
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="fancybox2.1.3/jquery.fancybox.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function () {
$('.preview2').on("click", function (e) {
e.preventDefault();
$.ajax({
type: "POST",
cache: false,
url: this.href,
data: $("#postp").serializeArray(),
success: function (data) {
$.fancybox(data, {
fitToView: false,
width: 905,
height: 505,
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
}); // fancybox
} // success
}); // ajax
}); // on
}); // ready
/* ]]> */
</script>
</head>
<body>
<div id="wrap">
<h3>POST preview with ajax API option</h3>
<p>REF: <a href="http://stackoverflow.com/q/14316054/1055987">http://stackoverflow.com/q/14316054/1055987</a></p>
<p style="font-size: 0.8em;"><strong>Author</strong>: Francisco Diaz (JFK) - <a href="http://www.picssel.com/">picssel.com</a></p><br />
<form id="postp" method="post" action="">
<p>
<label for="login_name">Name: </label>
<input type="text" id="login_name" name="login_name" size="30" />
</p>
<p>
<label for="login_pass">Password: </label>
<input type="password" id="login_pass" name="login_pass" size="30" />
</p>
<p>
<input type="submit" value="LOGIN" />
</p>
</form><br /><br />
<a class="preview2" data-fancybox-type="ajax" href="loginTest2.php" id="preview2">Preview</a><br /><br /><br />
<p><strong>NOTE</strong>: This DEMO is for Fancybox v2.1.3+</p>
</div>
데모 페이지 http://www.picssel.com/playground/jquery/postPreview_15jan13.html
위와 같다.
여기에는 form 이 존재하는대 form 까지 필요없다면
data: $("#postp").serializeArray(),
이부분은 수정해서 data: {'a':'a값','b':'b값','c':'c값'},
와 같이 사용할수도 있다.
'Story > Jquery' 카테고리의 다른 글
| Cross Domain XML using JQuery 크로스도메인에서 jquey 로 xml 사용하기 (0) | 2015.02.05 |
|---|---|
| jquery json 사용시 공백문제 (0) | 2014.10.06 |
| jQuery Timer (0) | 2014.06.19 |
| 글쓸때 tag 입력받기 (0) | 2014.04.21 |
| Top 10 JQuery Tooltip Plugins! (0) | 2014.04.02 |