Question

我已将内容分为两个标签，并使用javascript在两个标签之间切换。

<div class='tab-container'>
<div class='tab-1'>
<?php 
$sql="SELECT * FROM posts WHERE status='tab1'";
echo "<div class='db'
<h2>post</h2></div>";
?>
</div>
<div class='tab-2'>
<?php
$sql="SELECT * FROM posts WHERE status='tab2'";
echo "<div class='db'
<h2>post</h2></div>";
?>
</div>
</div>

Php代码通过WHERE子句select * from posts where status='tab1';在选项卡之间划分内容，以便从下面给出的一个选项卡ajax请求中删除帖子触发php代码，该代码更新从tab1到tab2的内容状态。< / p>

<script type="text/javascript">
$(function() {
$(".restore").click(function(){
var element = $(this);
var del_id = element.attr("id");
var info = 'id=' + del_id;
if(confirm("Restore?"))
  {
$.ajax({
type: "GET",
url: "restore.php",
data: info,
success: function(){ 
}
});
     $(this).parents(".db").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
}
return false;
});
});
</script>

以便从tab1中删除该帖子。这里的想法是通过ajax将帖子从一个标签移动到另一个标签。 javascript适用于从一个标签中删除帖子但是为了使该帖子出现在另一个标签中我必须重新加载页面，因为我还没有使用ajax。所以问题是我不知道如何通过ajax动态地将该帖子添加到另一个标签而不刷新页面。

Answer 1

要从ajax调用获取内容，您必须在服务器端回显它。

可能是这样的

echo "hi, this is new content";

现在在ajax成功

success: function(data){  
     alert(data); this will alert what was echoed in php(hi, this is new content)
}

如果要将内容添加到视图中的某个div，

$("class or id for the div").html(data);

Answer 2

在restore.php中，您应该获取所选帖子，然后将该帖子的状态更新为tab2。并将结果附加到主php页面。您可以通过restore.php附加相同内容。

Answer 3

试试这个

HTML

<div class="tabs" id="d-tab1"></div>
<div class="tabs" id="d-tab2"></div>
<a href="#" class="restore"  id="tab1">
<a href="#" class="restore"  id="tab2">

JS

$('.restore').click(function(e){
    e.preventDefault();
    var $tab = $(this);
    $.post('restore.php',{id: $tab.attr('id')},function(html){
        $('.tabs').hide();
        $('#d-'+$tab.attr('id')).html(html).show();
    })
})

或使用Jquery标签https://jqueryui.com/tabs/

Answer 4

同意@Niranjan N Raju。但是想补充一些。

使用console.log(data)代替alert(data)，因为最后不会显示对象信息。

如何通过ajax / php在选项卡之间切换内容？

4 个答案: