tp5.20框架中AJAX无刷新分页及搜索

控制器：

 1 // 获取数据
 2 public function index()
 3     {
 4         $data = Db::table('query')->paginate(5);
 5         return json($data);
 6     }
 7 
 8 
 9 // 显示展示页
10     public function show(){
11         return view('index');
12     }
 1 public function search(){
 2         $search = input('search');
 3         $data = Db::table('query')->where('title','like',"%$search%")->select();
 4         if ($data){
 5             return json($data);
 6         }else{
 7             return json("搜索条件不存在");
 8         }
 9 
10     }
11 
12     public function sort(){
13         $data = Db::table('query')->order('id','desc')->select();
14         return json($data);
15     }
16 
17     public function login(){
18         $code = input('code');
19         $nickName = input('nickName');
20 
21         $appid = "wxc5de25084db9570a";
22         $sessionid = "a83f88588c840b8d54519aafdd726be5";
23         $url = "https://api.weixin.qq.com/sns/jscode2session?appid=$appid&secret=$sessionid&js_code=$code&grant_type=authorization_code
24 ";
25         // 获取openid  【加true转数组】
26         $data = json_decode(file_get_contents($url),true);
27         // 判断表中是否有openid
28         $arr = Db::table('user')->where('openid',$data['openid'])->find();
29         if ($arr){
30             return json(['code'=>'200','msg'=>'success','data'=>null]);
31         }
32 
33         $user = [
34             'nickname' => $nickName,
35             'sessionkey' => $data['session_key'],
36             'openid' => $data['openid']
37         ];
38         $res = Db::table('user')->insert($user);
39         $id = Db::getLastInsID();
40         return json(['code'=>'200','msg'=>'success','data'=>$id]);
41     }

 

 

 

html中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
    <meta name="referrer" content="no-referrer" />
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
    <div id="ctn">
        <p @click="order">降序</p>
        <div class="box" v-for="vo in info">
            <p class="blockquote">
                <u>{{vo.title}}</u>
            </p>
            <div>
                <div>
                    <p>
                        {{vo.text}}
                    </p>
                </div>
            </div>
        </div>


        <div>
            <form action="">
                <input type="text" name="search" id="search">
                <input type="button" @click="form" value="搜索">
            </form>
        </div>

    <!--页数-->
    <ul class="pagination">
        <li v-for="i in pageCount" @click="click(i)">
            {{i}}
        </li>
    </ul>
    </div>
</body>
</html>

<script>
    new Vue({
        // 挂载点
        el: '#ctn',
        // 声明数据源
        data: {
            info: [

            ],
            // 总页数
            pageCount:"",

        },
        mounted() {
           this.click(1);
        },
        methods:{
            click:function (i) {
                axios
                    .get("http://www.movie.1808a.com/admin/index/index?page="+i)
                    .then(response => (
                        this.info = response.data.data,
                            this.pageCount = response.data.last_page
                    ))
            },
            form:function () {
                var search = $("#search").val();
                axios
                    .get("http://www.movie.1808a.com/admin/index/search?search="+search)
                    .then(response => (
                        this.info = response.data
                        // console.log(response.data)
                    ))
            },
            order:function () {
                axios
                    .get("http://www.movie.1808a.com/admin/index/sort")
                    .then(response => (
                        this.info = response.data
                    ))
            }

        }
    })
</script>

 

posted @ 2020-12-30 09:41  SlytherinGirl  阅读(90)  评论(0)    收藏  举报