Question

这是我正在使用的代码。从我见过的其他例子来看，这应该有效，但事实并非如此。并且已经确定我使用的是最新的彩盒。

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.
        }
    });
}

Answer 1

您将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的回答。

编辑：我在潜水源代码后来到了这里：Source

相关的行是第800行和第856行.iframe和href似乎不兼容，所以我检查了Firebug中加载的元素，发现它是一个iframe，src属性设置为href变量。 / p>

Answer 2

确实说： “.load（url [，data] [，complete（responseText，textStatus，XMLHttpRequest）]） url包含发送请求的URL的字符串。 dataA使用请求发送到服务器的映射或字符串。“

你确实有一个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.
            }
        });
    }

http://www.codingforums.com/showthread.php?t=158713

http://api.jquery.com/load/

Answer 3

您可以在iframe中打开一个空白页面，该页面从首页获取数据并自行发布，如下所示：

var postData = window.top.getDataToPost()
$.post(postUrl,postData)

在打开colorbox的页面上，创建一个提供值

的函数

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

Answer 4

在您的示例代码中，data是一个对象。在这种情况下，它是由对象文字语法创建的。

到底发生了什么？

您尝试过哪些浏览器（包括版本号）？
您使用的是哪个jQuery版本？
您在控制台中是否收到任何错误？
您是否在Firebug（或其他开发人员工具/ Fiddler等）的网络选项卡中查看了请求，以确切了解请求中的内容（例如请求方法）和服务器的响应？
您是否直接使用jQuery.load()尝试了请求，看看会发生什么？

Answer 5

我已经通过将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}}});

将数据发布到colorbox iframe？

5 个答案: