简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - php如何实现无刷新的收藏功能，最好有个实例~
淡淡烟草味
淡淡烟草味 2017-07-05 10:02:03
0
5
4403

php如何结合ajax实现无刷新的收藏功能，就是点击一个图标之前灰色，点击之后红色的那种，最好有个实例~谢谢大佬们~

淡淡烟草味
淡淡烟草味

全部回复(5)
代言
代言2017-07-05 10:04:03 5 楼 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<style>
    .color{
        color: #CCC;
    }
</style>
<body>
    <p class="color">灰色</p>
</body>

<script>
$(function () {
    var $p = $(".color");
    $p.click(function () {
        $.ajax({
            url:"xxxx",
            data:"xxxx",
            success:success
        });
        function success() {
            $p.css("color","#F00");
        }
    })
})
</script>
</html>

php那边处理完成之后在回调函数里面处理就ok了

点赞 +0
添加回复
滿天的星座
滿天的星座2017-07-05 10:04:03 4 楼 
<html>
<p id="goods_id_1">产品1号</p>
<a href="javacript:collection(1)">收藏</a>
</html>

<script>
function collection(gid)
{
    $.ajax(
        url:"处理页面.***",
        data:{goods_id:gid},
        Type:"POST",//PHP举例，这里用POST，处理页面里收到的参数字段为$_POST['goods_id'],gid为你想要收藏的参数值
        dataType: "json",//还有text，html等，参考[ajax方法]
        success: function(data){alert('收藏成功');}//成功后，data为url里填写的处理页面的返回参数
    );
}
</script>

你可以去看看ajax方法的详细介绍 [ajax方法]

点赞 +0
添加回复
学习ing
学习ing2017-07-05 10:04:03 3 楼

点击之后发送ajax请求，然后设置图标颜色为红色。同时需要注意每次请求这个页面，记得初始化这个收藏图标的颜色。

点赞 +0
添加回复
淡淡烟草味
淡淡烟草味2017-07-05 10:04:03 2 楼

点击收藏
<script>
//$id 为要收藏的产品id
//url 为操作数据的地址
function collection($id){
if($id==''){return false;}
var param={};
param.id=$id;
$.post('url',param,function(data){
if(data==true){
alert('收藏成功');
}else{
alert('请稍后重试');
}
})
}
</script>
///数据操作
public function like(){
1 post 接收数据
2 近行存入操作
3 返回值 （成功 return true 失败 return false）

}

点赞 +0
添加回复
洪涛
洪涛2017-07-05 10:04:03 1 楼

无刷新用ajax

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！