Jquery 是否将数据发布到配色箱iframe?

Jquery 是否将数据发布到配色箱iframe?,jquery,post,iframe,colorbox,Jquery,Post,Iframe,Colorbox,这是我正在使用的代码。从我看到的其他例子来看,这应该是可行的,但事实并非如此。并且已经确定我使用的是最新的配色箱 function updateFolderCate(ID,Type){ $.colorbox({ iframe:true, scrolling: false, innerWidth:'100', innerHeight:'100', href:"page.php", data:{L

这是我正在使用的代码。从我看到的其他例子来看,这应该是可行的,但事实并非如此。并且已经确定我使用的是最新的配色箱

function updateFolderCate(ID,Type){
    $.colorbox({
        iframe:true,
        scrolling: false,
        innerWidth:'100',
        innerHeight:'100',
        href:"page.php",
        data:{LinkID:ID,itemType:Type},
        onClosed:function(){
            //Do something on close.
        }
    });
}

在示例代码中,
数据
是一个对象。在本例中,它是由对象文字语法创建的

到底发生了什么

  • 您试用过哪个浏览器(包括版本号)

  • 您使用的jQuery版本是什么

  • 您在控制台中有任何错误吗

  • 您是否查看了Firebug(或其他开发工具/Fiddler/等)的网络选项卡中的请求,以准确了解请求中的内容(例如请求方法)和服务器的响应

  • 您是否直接使用
    jQuery.load()
    尝试了该请求以查看结果

  • 它确实说: .load(url[,数据][,完成(responseText,textStatus,XMLHttpRequest)]) URL包含请求发送到的URL的字符串。 数据随请求发送到服务器的映射或字符串。“

    您确实有一个href对象,但我不认为它们在本例中一起使用。 要使用.load或在本例中使用数据,我认为您需要指定一个url。我认为这两种方法都可能奏效

       function updateFolderCate(ID,Type){
            $.colorbox({
                iframe:true,
                scrolling: false,
                innerWidth:'100',
                innerHeight:'100',
                href:"page.php?LinkID=" + ID + "&itemType=" + Type,
                // or data : { "page.php", { LinkID:ID,itemType:Type } } 
                onClosed:function(){
                    //Do something on close.
                }
            });
        }
    


    您正在将iframe设置为true。这将打开一个颜色框,创建一个iframe,并将iframe的src属性设置为href指定的位置。所以从逻辑上讲,这不能做POST请求。这可能会实现你想要的,但我不确定

    function updateFolderCate(ID,Type){
        $.colorbox({
            open: true,
            scrolling: false,
            innerWidth:'100',
            innerHeight:'100',
            href:"page.php",
            data:{LinkID:ID,itemType:Type},
            onClosed:function(){
                //Do something on close.
            }
        });
    }
    
    这与iframe方法的行为不完全一样,您可能需要重新编写端点。如果您的端点不必只接收POST请求,那么使用earlonrails的答案

    编辑:我是在深入研究源代码后得出这个结论的:


    相关行为第800行和第856行。iframe和href似乎不兼容,因此我检查了Firebug中加载的元素,发现它是一个将src属性设置为href变量的iframe。

    您可以在iframe中打开一个空白页,从首页获取数据,并按如下方式发布:

    var postData = window.top.getDataToPost()
    $.post(postUrl,postData)
    
    在打开colorbox的页面上,创建一个函数来提供值

    function getDataToPost() {
       return { param1 = value1 }
    }
    

    我已经解决了这个问题,将colorbox导航到about:blank,然后在onComplete回调中,呈现一个带有隐藏字段的表单,该表单随POST数据一起提交。为此目的而完美地工作

    function createFormInputsFromObject(data, prefix) {
      prefix = prefix || '';
      var inputs = '';
    
      jQuery.each(data, function(name, value){
        if (prefix !== '') name = prefix + '[' + name + ']';
        if (Array.isArray(value) || value instanceof Object) {
          inputs += createFormInputsFromObject(value, name);
        }
        else {
          inputs += jQuery('<input>').attr({type: 'hidden', name: name, value: value}).prop('outerHTML');
        }
      });
    
      return inputs;
    }
    
    function showPdf(url, postData) {
      jQuery.colorbox({
        iframe: true,
        href: 'about:blank',
        width: '90%',
        height: '90%',
        onComplete: function() {
          var iframe = jQuery('#cboxLoadedContent iframe');
          var form = jQuery('<form>').attr({action: url, method: 'POST', target: iframe.attr('name')});
          if (!jQuery.isEmptyObject(postData)) {
            jQuery(createFormInputsFromObject(postData)).appendTo(form);
          }
          form.appendTo(iframe)
              .submit()
              .remove();
        }
      });
    }
    
    
    showPdf('/source/url', {sitName: 'sitka', items: [2, 4, 5, 6], extended: {i1: [10, 20], i2: {a: 0, b:1}}});
    
    函数createFormInputsFromObject(数据,前缀){
    前缀=前缀| |“”;
    var输入=“”;
    每个(数据、函数(名称、值){
    如果(前缀!='')name=prefix+'['+name+']';
    if(Array.isArray(value)| |对象的值实例){
    输入+=createFormInputsFromObject(值、名称);
    }
    否则{
    inputs+=jQuery(“”).attr({type:'hidden',name:name,value:value}).prop('outerHTML');
    }
    });
    返回输入;
    }
    函数showPdf(url、postData){
    jQuery.colorbox({
    伊夫拉姆:是的,
    href:“关于:空白”,
    宽度:“90%”,
    身高:90%,
    onComplete:function(){
    var-iframe=jQuery('cboxLoadedContent-iframe');
    var form=jQuery(“”).attr({action:url,method:'POST',target:iframe.attr('name')});
    如果(!jQuery.isEmptyObject(postData)){
    jQuery(createFormInputsFromObject(postData)).appendTo(form);
    }
    表单.附录(iframe)
    .提交()
    .remove();
    }
    });
    }
    showPdf('/source/url',{sitName:'sitka',items:[2,4,5,6],扩展:{i1:[10,20],i2:{a:0,b:1});
    
    它在colorbox站点上提到了通过ajax请求提交GET或POST值。data属性的作用与jQuery的.load()数据参数完全相同,因为ColorBox使用.load()进行ajax处理。所以我去了jquery站点,.load需要将数据作为对象来承担post。我该如何使用colorbox?谢谢Erik!我测试了这段代码,效果非常好!我不想通过URL传递var并使用GET。