Yii之 ajax与layui

最新推荐文章于 2024-02-22 10:18:29 发布

灼灼桃花夭

最新推荐文章于 2024-02-22 10:18:29 发布

阅读量202

点赞数

文章标签： yii

本文链接：https://blog.csdn.net/qq_39835505/article/details/119797565

版权

composer 下载项目之后，项目根目录定在 web 目录，首页如下
在这里插入图片描述
yii 的访问URL 如下

http://www.iy.com/index.php?r=test/layui
其中， test 指 controllers/TestController
	  layui 指 TestController/actionLayui

如下

class TestController extends Controller
{
	    public function actionLayui()
	    {
	        return $this->render('index');   // 返回页面
	    }
	
	    public function actionAjax(){        // ajax请求
	    
	        $query = Country::find();
	        $pagination = new Pagination([
	            'defaultPageSize'=>5,
	            "totalCount"=>$query->count(),
	            ]);
	        $countries = $query->orderBy('name')->offset($pagination->offset)->limit($pagination->limit)->all();
	
	        $result = [
	            'count'=>$query->count(),
	            'data'=>$countries
	        ];
	        return Json::encode($result);
	        
	        // return $this->render('index',[
	        //         'countries'=>$countries,
	        //         'pagination'=>$pagination,
	        //     ]);
	    }

}

页面 views/test/index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>qing</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <script src="<?= Yii::$app->request->baseUrl . '/js/layui/layui.js'?>"></script>
    <script src="<?= Yii::$app->request->baseUrl . '/js/jquery.min.js'?>"></script>
    <link href="<?= Yii::$app->request->baseUrl . '/js/layui/css/layui.css'?>" rel="stylesheet">
</head>
<body>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
      
  <div class="layui-tab-content" style="height: 100px;">

        <div class="mainTop layui-clear" style="margin:20px">
            <div class="fr">
              <form class="layui-form layui-from-pane" required lay-verify="required" action="">
                  <div class="layui-form-item">
                      用户名：
                      <div class="layui-inline">
                          <input class="layui-input"  name="username" autocomplete="off">
                      </div>
                      公司名称：
                      <div class="layui-inline">
                          <input class="layui-input" name="corp_name" autocomplete="off">
                      </div>
                      <div class="layui-inline">
                          <div class="layui-input-inline">
                              <button type="button" class="layui-btn layui-btn-blue"  lay-submit=""  lay-filter="search">搜索</button>
                          </div>
                      </div>
                  </div>
              </form>
            </div>
        </div>

        <table class="layui-show" id="followTable"></table>
        
  </div>
</div> 

</body>
</html>
<script>

layui.use(['element', 'table','laydate','form'], function () {
    var $ = layui.jquery,
            element = layui.element, //Tab的切换功能，切换事件监听等，需要依赖element模块
            table = layui.table,
            form = layui.form,
            laydate = layui.laydate;

        $.ajax({
            url:'/index.php?r=test/ajax',
            // type:'get',
            type:'post',
            dataType:"json",
            async:true,
            sussess:function(){
              console.log('成功');
            },
            error:function(res){
              console.log('err');
              console.log(res);
            }
        })

        table.render({
            elem: "#followTable",
            url:'/index.php?r=test/ajax',
            // method:"get",
            page: true,
            cols: [[
                {field: "code", title: "id", width: 80},
               // {field: "name", title: "名称", width: 100},
            ]],
            parseData: function (res) {
                    return {
                        "code": 0,
                        "msg": "暂无数据",
                        "count": res.count,  // 数据分页
                        "data": res.data
                    }
                },
                error:function(){
					console.log('111');
                },
                done:function(res){
					console.log('45');
					console.log(res);
                }
         });

});
</script>

结果如下

在这里插入图片描述

灼灼桃花夭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Yii之 ajax与layui

composer 下载项目之后，项目根目录定在 web 目录，首页如下yii 的访问URL 如下http://www.iy.com/index.php?r=test/layui其中， test 指 controllers/TestController layui 指 TestController/actionLayui如下class TestController extends Controller{ public function actionLayui() {
复制链接

扫一扫