jquery - 在fancybox2中添加按钮，并调用服务器方法

Question

我想在我的幻想框中添加一个按钮，它将调用服务器方法。请你帮助我好吗？我正在使用fancyBox2。谢谢

Answer 1

其实很简单。这是一个普通的服务器调用。假设您想查询以下 url（呈现一些 json）：http ://echo.jsontest.com/key/value/one/two

然后你只需要在你的按钮的点击事件上绑定服务器调用。像这样的东西：

$.getJSON('http://echo.jsontest.com/key/value/one/two', function(data) {
    var items = [];
    $.each(data, function(key, val) {
        items.push('<li>' + key + ':' + val + '</li>');
    });

    $('<ul/>', {
        html: items.join('')
    }).appendTo('#myId');
});

或者一个普通的 ajax 调用，如果你请求 json 以外的东西：http: //api.jquery.com/jQuery.ajax/

您可以在此处找到功能示例：http: //jsfiddle.net/xavier_seignard/2MDpe/2/

我想你会拥有你需要的所有钥匙。

问候

Answer 2

谢谢你的回复，但我发现了别的东西，没关系。这是我的代码：

$(".ad-gallery").on("click", ".ad-image", function () {
    $.fancybox({

        href: $(this).find("img").attr("src"),
        titlePosition: 'outside',
        title: $(this).text(),
        'beforeShow': function () {
            var content = $('.fancybox-inner');  
content = $('.fancybox-inner');
                $('.fancybox-wrap').append('<div class="fancy_print"></div>'); //here I add the buton
                $('.fancy_print').bind("click", function () {//and here, call the function
                    var retVal = confirm("Are you sure you want to order it?");
                    if (retVal == true) {
                            $.ajax({
                                type: "POST",
                                url: "WebForm1.aspx/coucou",
                                data: "{}",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                async: true,
                                cache: false,
                                error: function() {
                                            alert("Error");
                                            },
                                success: function (msg) {
                                    alert("The item has been added to your list order!");
                                }
                            })
                        return true;
                    }

                else {
                    alert("The item hasn't been added to your list order!");
                }

            });
        }
    });
});