如何將值表單數據庫傳遞到彈出窗口

Question

我想通過使用帶有href的標籤將值傳遞給彈出窗口，當我單擊一個 將值表單數據庫獲取到隱藏層如何通過js傳遞值。

的標記碼

<a 'href=index.php?id=3'></a> 

隱層

<div class='wrap'> 
<div class='content'> 
<h2>Well Hello!</h2> 
<p> 
<? if (isset($_GET['id'])){   
$id = $_GET['id']; 
echo $id ;} ?> 
</p> 
</div> 
</div> 

js代碼

$('a').on('click', function(){ 
$('.wrap, a').toggleClass('active'); 
    return false; 
}); 

Answer 1

如果你想這樣做的JavaScript的方式，看到這個例子。

$(document).ready(function() { 
 

 
    $('a.toggle-wrap').on('click', function(e) { 
 
    e.preventDefault(); // prevent default behaviour of the link that would reload the page 
 
    $('.wrap, a.toggle-wrap').removeClass('active'); // remove class active on every link clicking 
 
    var target_id = $(this).attr("data-id"); //get the desired id from link 
 
    var wrap_element = $('.wrap[data-target=' + target_id + '] p'); 
 
    var link_element = $('a[data-id=' + target_id + ']'); 
 
    link_element.toggleClass('active'); 
 
    $.ajax({ 
 
     type: "GET", 
 
     url: "someOtherScriptThatOnlyOutputsResults.php", 
 
     data: "id="+target_id, 
 
     success: function(resultData) { 
 
     wrap_element.html(resultData).toggleClass('active'); // only toggle desired ids 
 
     }, error: function() { 
 
     wrap_element.html('Could not load data').toggleClass('active'); 
 
     } 
 
    }); 
 

 
    }); 
 

 
});

.wrap { 
 
    display: none; 
 
} 
 

 
.wrap.active { 
 
    display: block; 
 
} 
 

 
a { 
 
    color: green; 
 
} 
 

 
a.active { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<a class="toggle-wrap" data-id="3">Link 3</a> 
 
<a class="toggle-wrap" data-id="4">Link 4</a> 
 

 
<div class="wrap" data-target="3"> 
 
    <div class="content"> 
 
    <h2>Well Hello content 3!</h2> 
 
    <p>Your db content related to id 3 from database, using php. 
 
    </p> 
 
    </div> 
 
</div> 
 

 
<div class="wrap" data-target="4"> 
 
    <div class="content"> 
 
    <h2>Well Hello content 4!</h2> 
 
    <p>Your db content related to id 4 from database, using php. 
 
    </p> 
 
    </div> 
 
</div>

添加標識將隱藏包裹（S）和鏈接（S），並與合作。通過使用js代碼片段中的查詢，您可以定位某些HTML標籤。使用CSS顯示來隱藏和顯示您的包裝標籤。

創建一個新的PHP文件someOtherScriptThatOnlyOutputsResults.php獲取和返回數據：

<?php 
if(isset($_GET['id'])) { 

    $pdo = new PDO('mysql:host=someHost;dbname=someDatabase', 'someUser', 'somePass'); 
    $statement = $pdo->prepare("SELECT columnWithContent FROM yourContentTable WHERE id = ?"); 
    $statement->execute(array($_GET['id'])); 
    $row = $statement->fetch(); 
    $content = $row['columnWithContent']; 
    echo $content; 

} 
?>