如何将值表单db传递给弹出窗口

时间:2017-07-14 14:58:07

标签: javascript php

当我点击a时,我希望通过使用带有href的标记将值传递给弹出窗口 从db获取值到隐藏层如何通过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 code

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

1 个答案:

答案 0 :(得分:0)

如果您想以javascript方式执行此操作,请参阅此示例。

&#13;
&#13;
$(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');
      }
    });

  });

});
&#13;
.wrap {
  display: none;
}

.wrap.active {
  display: block;
}

a {
  color: green;
}

a.active {
  color: red;
}
&#13;
<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>
&#13;
&#13;
&#13;

向隐藏的包裹和链接添加标识符并使​​用这些标识符。通过使用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;

}
?>