登录

javascript - php如何实现无刷新的收藏功能,最好有个实例~

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

# PHP
淡淡烟草味 淡淡烟草味 2459 天前 4252 次浏览

全部回复(5) 我要回复

  • 代言

    代言2017-07-05 10:04:03

    <!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

    <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

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

    回复
    0
  • 淡淡烟草味

    淡淡烟草味2017-07-05 10:04:03

    点击收藏
    <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
  • PHP中文网

    PHP中文网2017-07-05 10:04:03

    无刷新用ajax

    回复
    0
  • 取消 回复 发送