web前端与php后台做个简单的前后交互，传递数组，制作jquery版tab切换

最新推荐文章于 2023-03-24 00:57:56 发布

原创最新推荐文章于 2023-03-24 00:57:56 发布 · 732 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #web前端 #tab切换 #前后台交互

jquery 同时被 3 个专栏收录

2 篇文章

订阅专栏

web前端

1 篇文章

订阅专栏

tab切换

1 篇文章

订阅专栏

本文介绍了如何使用Jquery在web前端与PHP后台进行简单的数据交互，通过传递数组来实现实现Tab切换功能。示例中展示了前端HTML结构以及对应的PHP处理代码块。

前端代码块

***********************************************************************

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.main{
overflow: hidden;
margin-top: 10px;
}
.btn{
width: 80px;
height: 20px;
margin-right: 10px;
float: left;
background-color: yellow;
text-align: center;
}
.show{
margin-top: 10px;
width: 350px;
height: 350px;
border-color: cyan;
display: none;
position: relative;
overflow: hidden;
}
img{
width: 100%;
height: 100%;
}
p{
width: 350px;
opacity: 0.5;
background-color: black;
color: white;
position: absolute;
text-align: center;
top:0;
}
</style>
</head>
<body>
<div class="main">

</div>
<div class="mov"></div>
</body>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$.ajax({
//获取后台地址
url:'http://localhost/AJAX/php/getText.php',
//获取方式（method和type是一样的）
type:'get',
//向后台传递参数
// data:{type:'show'},
//成功回调函数参数是后台传递的数据
success:function(res){
var arr = JSON.parse(res);

for (var i = 0; i < arr.length; i++) {
var div1 = $('<div class="btn">'+(i+1)+'</div>');
var div2 = $('<div class="show"></div>');
$('.main').append(div1);
$('.mov').append(div2);
div2.html('<img src="'+arr[i].url+'"><p>'+arr[i].name+'</p>');
}
//因为是异步进行的如果放到外面就是同步的了
$('.btn:eq(0)').css({'backgroundColor':'red'});
$('.show:eq(0)').css({'display':'block'});

$('.btn').on('mouseover',function(){
$(this).css({'backgroundColor':'red'}).siblings().css({'backgroundColor':'yellow'});
$('.show').eq($(this).index()).css({'display':'block'}).siblings().css({'display':'none'});
console.log(0);
});
}
});

</script>
</html>

***********************************************************************************************

php代码块

<?php

$arr = array(array('url'=>'img/1.jpg','name'=>'美女1'),array('url'=>'img/2.jpg','name'=>'美女2'),array('url'=>'img/3.jpg','name'=>'美女3'),array('url'=>'img/4.jpg','name'=>'美女4'));

$json = json_encode($arr);
echo $json;

?>