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>