点击事件，选择按钮，点击从前端传到后台，查询数据，并返回前段，显示出来。---tp5

最新推荐文章于 2021-08-27 11:47:55 发布

何为清欢

最新推荐文章于 2021-08-27 11:47:55 发布

阅读量1.6w

点赞数 1

文章标签： html 数据前端

本文链接：https://blog.csdn.net/qq_34723125/article/details/78791095

版权

//这是HTML页面

<div class="form-group">
                        <label class="col-sm-3">听读写说分类</label>
                        <div class="col-sm-8">
                            <a class="btn btn-sm btn-danger btn-mid" οnclick="searchSet({mid:-1,class:'btn-mid',e:this})" href="#">全部</a>
                            {volist name="listcate" id="list"}
                            <a class="btn btn-sm btn-default btn-mid" οnclick="searchSet({mid:{$list.id},class:'btn-mid',e:this})" href="#">{$list.catename}</a>
                            {/volist}

                            <!--<a class="btn btn-sm btn-default btn-mid" οnclick="searchSet({mid:2,class:'btn-mid',e:this})" href="#">读</a>
                            <a class="btn btn-sm btn-default btn-mid" οnclick="searchSet({mid:3,class:'btn-mid',e:this})" href="#">写</a>
                            <a class="btn btn-sm btn-default btn-mid" οnclick="searchSet({mid:4,class:'btn-mid',e:this})" href="#">说</a>-->
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3">图视频分类</label>
                        <div class="col-sm-8">
                            <a class="btn btn-sm btn-danger btn-pid" οnclick="searchSet({pid:-1,class:'btn-pid',e:this})" href="#">全部</a>
                            <a class="btn btn-sm btn-default btn-pid" οnclick="searchSet({pid:1,class:'btn-pid',e:this})" href="#">图片</a>
                            <a class="btn btn-sm btn-default btn-pid" οnclick="searchSet({pid:2,class:'btn-pid',e:this})" href="#">视频</a>
                        </div>
                    </div>

                </div>


            </form>
        </div>
    </div>
</div>

//这是JS页面也可以说是jq

<script>

    var searchData = {
        mid: null,
        pid: null,
        page: null
    };

    searchSet({});

    function searchSet(set){
        $("." + set.class).removeClass("btn-danger");
        $("." + set.class).addClass("btn-default");
        if(set.e) set.e.setAttribute("class","btn btn-sm btn-danger " + set.class);
        if(set.mid) searchData.mid = set.mid == -1 ? null : set.mid;
        if(set.pid) searchData.pid = set.pid == -1 ? null : set.pid;
        if(set.page) searchData.page = set.page;

        search();
    }

    function search(){

        $.post("set_text" ,searchData ,function(result){
            var dataObj = eval('(' + result + ')');
            var dataList = dataObj.data;
            var domHtml ='';
                for (let i in dataList) {
                domHtml += "<tr style='color: #9A0000'>";
                domHtml += "<td  style='color: #0a0a0a'>"+dataList[i].id+"</td>";
                domHtml += "<td>"+dataList[i].nickname+"</td>";
                domHtml += "<td><a href="+dataList[i].url+"><button type='button' class='btn btn-success btn-xs'>查看</button></a></td>";
                domHtml += "<td>"+dataList[i].follow_num+"</td>";
                domHtml += "<td>"+dataList[i].followers_num+"</td>";
                domHtml += "<td>"+dataList[i].forwarding_num+"</td>";
                domHtml += "<td>"+dataList[i].comment_num+"</td>";
                domHtml += "<td>"+dataList[i].like_num+"</td>";
                var sTitle =dataList[i].content;
                    if(sTitle.length >8){ sTitle = sTitle .substring(0,8)+"..."}
                var sveido=dataList[i].video_url;
                var sForwarding=dataList[i].is_forwarding;
                if(sForwarding='0'){
                    sForwarding='是';
                }else{
                    sForwarding='否';
                }
                    var surl_img=dataList[i].img_url;
                    if(surl_img='null'){
                        surl_img='无'
                    }else{
                        surl_img=dataList[i].img_url;

                    }
                domHtml += "<td>"+sTitle+"</td>";
                domHtml += "<td><button type='button' class='btn btn-success btn-xs'>"+sForwarding+"</button></td>";
                domHtml += "<td><img src="+surl_img+">"+surl_img+"</td>";
                domHtml += "<td><a href="+sveido+"><button type='button' class='btn btn-success btn-xs'>查看</button></a></td>";
                domHtml += "<td>"+dataList[i].date+"</td>";
                domHtml +="</tr>";
            }
            $("#list").html(domHtml);
            $('#callBackPager').extendPagination({
                totalCount: dataObj.total,
                showCount: 10,
                currentPage: dataObj.current_page,
                limit: dataObj.per_page,
                callback: function (curr) {
                    searchSet({page:curr});
                }
            });

        });
    }
//php界面
public function text(){

    $user= new WeiboArticle();
    $this->setProject('weibo');
    $mid=$this->request->post('mid');
    $pid=$this->request->post('pid');

    if($mid){
        $user->where("project_mid",$mid);
    }

    if($pid){
        $user->where("project_pid",$pid);
    }
    if($pid&&$mid){
        $user->where("project_pid",$pid);
        $user->where("project_mid",$mid);
    }

    $list = $user->paginate(5);
    echo json_encode($list);

}