单击时，而不是转到链接/页面，请在div内打开页面

Question

这里我有一个链接

 <h2 data-toggle="modal" data-target="#myModal">
 <a href="post.php?id=<?php echo $post_id;?>">  post  </a>  </h2>

单击链接后，它转到post.php?id=1

如何防止转到此链接，但同时在下面的div中打开此链接？

注意：div内放的任何内容都会自动显示，因为它是模式div。

我需要做的就是将div中的post.php包含在id中，并防止进入post.php?id=1

 <h2 data-toggle="modal" data-target="#myModal">
 <a href="post.php?id=<?php echo $post_id;?>">  post  </a>  </h2>


<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Edit Post</h4>
  </div>
  <div class="modal-body">

    <div>     




          //include post.php inside here with id




    </div>

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

这是post.php：

<?php 

include("includes/connect.php");

if(isset($_GET['id'])){

$get_id = $_GET['id'];

$get_query = "select * from posts where post_id='$get_id'";

$run_query = mysql_query($get_query); 

while ($row=mysql_fetch_array($run_query)){


    $post_id = $row['post_id'];
    $post_title = $row['post_title'];

    $post_image = $row['post_image'];

}
}
?>`
<div>

 <h2> <?php echo $post_title;?> </h2>  


</div>

Answer 1

<h2 data-toggle="modal" data-target="#myModal">See post</h2> ，然后将post.php包含到模式中。 没有必要将链接放入模式打开器中。 因为与模式的绑定是由数据目标而不是某些链接进行的。 为了更好地改善，您可以使用post中的id来生成页面中的唯一id。 如果您想拥有多个类似的帖子/模式

data-target="#myModal_<?php echo $post_id;?>" 

并且模式div应该具有相同的值。 id="myModal_<?php echo $post_id;?>"

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <h2 data-toggle="modal" data-target="#myModal">
      <a href="#" id="post">  post  </a>  </h2>
    <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Edit Post</h4>
      </div>
      <div class="modal-body">

        <div id="include">     

            //include post.php inside here with id

        </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

    <script>
    $(function() {
        $("#post").click(function() {
            var id = "<?php echo $post_id;?>";
            $.ajax({
                url : 'post.php' ,
                method : 'get',
                success : function (res)
                {
                    $("#include").html(res);
                }
            });
        });
    });
    </script>

在Post.php页面中。 您必须将所有html放入变量中并回显它：-您的url- 'post.php'?id='+ id

post.php中

<?php 
$html = "<h1>This is Post page content</h1>";
echo $html ;
?>

Answer 3

您将需要运行一些javascript / JQuery。

首先，您需要停止激活链接，因为简单的onclick="return false"应该可以解决问题。 然后，您需要将该单击绑定到post.php的ajax请求中。

看一下如何构建一个可以在单击时运行的函数，甚至是JQuery的处理程序：

• 点击时
• 事件处理程序
• 通过Jquery进行AJAX