javascript或jquery通过阿贾克斯发送邮件数据

Question

通过阿贾克斯邮寄请求与任何灯箱拼凑挣扎。 概念是点击一个链接后发送到服务器的数据包含图像标识符和某种用户验证信息。 生成的jpg图像应显示在响应式开源灯箱中。 尝试lightboxj.js和魔术盒没有成功。 这可能吗？ 任何示例？由于

更新1

我现在包括一些代码，做这项工作的一半：它加载到一个特定的div（#imageHidden）我需要的图像（因此，“POST”请求被覆盖）

$("#testa").bind('click', function(e){ 
e.stopImmediatePropagation(); 
e.preventDefault(); 

$.ajax({ 
    type: "POST", 
    data  : { 
    username: username, 
    password: password, 
    img:  img 
    }, 
    url: php_url, 
    success: function(data){ //read the value and save in settings 
    if (data.length>0) { 
       $('#hiddenImage').html('<img src="data:image/jpeg;base64,' + data + '" />'); 
       // $.colorbox({href:"#hiddenImage"});  
    } 
    }); 

然后我会设置这个div为隐藏，以避免显示在页面上（我希望它仅在灯箱）显示...

现在的问题是如何显示此成一个灯箱。任何建议？

出于某种原因，颜色框是不是在我的情况下工作

感谢

更新2

好，一些分类：

1. 颜色框所需要的属性内嵌到be true to show content of the page：

   $.colorbox({inline:true, href:"#hiddenImage"}); 
   

2. 我已经把我的#hiddenImage到#hiddenDiv：

   #hiddenDiv {  display: none; } 
   

更新3

好吧，我觉得现在的工作。 我使用colorbox作为灯箱。 请注意#hiddenImage是一个想要显示的图像，它将被加载到一个不可见的（display：none）#hiddenDiv DIV中。

对于大家感兴趣的最终代码：

$("#testa").bind('click', function(e){ 
e.stopImmediatePropagation(); 
e.preventDefault(); 

$.ajax({ 
type: "POST", 
data  : { 
username: username, 
password: password, 
img:  img 
}, 
url: php_url, 
success: function(data){ //read the value and save in settings 
if (data.length>0) { 
      $('#hiddenImage').html('<img src="data:image/jpeg;base64,' + data + '" />'); 
      $.colorbox({inline:true, href:"#hiddenImage"}); 
} 
}); 
}); 

唯一剩下的问题似乎在某个时候是lightbos空的，但如果我设置一个计时器，颜色框调用之前等待的秒的十分之几本被解决。

有没有一种方法，以确保代码

$('#hiddenImage').html('<img src="data:image/jpeg;base64,' + data + '" />'); 

调用颜色框（除了丑的setTimeout选项）之前完全执行？

Answer 1

我觉得我得到的权利也灯箱中显示IMG满载后，才：

HTML：

<div id="hiddenDiv"><img src="" id="hiddenImg"/></div><a href="#" id="testa">Click Here</a> 

CSS：

#hiddenDiv {  display: none; } 

JS：

$("#testa").bind('click', function(e){ 
e.stopImmediatePropagation(); 
e.preventDefault(); 

$.ajax({ 
type: "POST", 
data  : { 
username: username, 
password: password, 
img:  img 
}, 
url: php_url, 
success: function(data){ //read the value and save in settings 
if (data.length>0) { 
     $('#hiddenImage').html('<img src="data:image/jpeg;base64,' + data + '" />'); 
     $("#hiddenImage").load(function() { 
      $.colorbox({inline:true, href:"#hiddenImage"}); 
     }); 
} 
}); 
}); 

Answer 2

下面的代码片段是有点混乱，但你如何做到这一点的要点就在那里。

使用Lokesh Dhakar's lightbox，您可以在页面加载后更改某个lightbox lightbox a元素的href。通过从ajax调用的回调中更新它，您可以将其设置为由该ajax调用返回的图像url。

var ajaxDummyJpg = 'http://placehold.it/200x200'; 
 

 
function fireAjax() { 
 
    $.ajax({ 
 
    method: 'GET', 
 
    url: '#', 
 
    complete: function (data) { 
 
     console.log(data); 
 
     // Replace this with actual returned image url and use success instead 
 
     $('a').attr('href', ajaxDummyJpg); 
 
     $('a').text('This will now point to ' + ajaxDummyJpg); 
 
    } 
 
    }); 
 
} 
 

 
$('#fireAjax').on('click', fireAjax);

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://rawgit.com/lokesh/lightbox2/master/src/js/lightbox.js"></script> 
 
<link rel="stylesheet" href="http://rawgit.com/lokesh/lightbox2/master/src/css/lightbox.css"/> 
 

 
<button id="fireAjax">Fill Image</button> 
 

 
<a href="#" data-lightbox="lightbox">This will be blank currently.</a>