javascript - How to implement the collection function without refreshing in php, it is best to have an example~
淡淡烟草味
淡淡烟草味 2017-07-05 10:02:03
0
5
4418

How to combine php with ajax to realize the collection function without refreshing, which is gray before clicking on an icon and red after clicking. It is best to have an example~Thank you guys~

淡淡烟草味
淡淡烟草味

reply all(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>

After the PHP processing is completed, it will be processed in the callback function.

滿天的星座
<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>

You can go and see the detailed introduction of ajax method [ajax method]

学习ing

Send an ajax request after clicking, and then set the icon color to red. At the same time, you need to pay attention to every time you request this page, remember to initialize the color of this collection icon.

淡淡烟草味

Click to collect
<script>
//$id is the product id to be collected
//url is the address of the operation data
function collection($id){
if($id==''){return false; }
var param={};
param.id=$id;
$.post('url',param,function(data){
if(data==true){
alert('Collection successful');
}else{
alert('Please try again later');
}
})
}
</script>
///Data operation
public function like(){
1 post receiving data
2 Recent Row deposit operation
3 Return value (return true if successful, false if failed)

}

洪涛

Use ajax without refreshing

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template