laravel基础课程---12、lavarel的ajax操作2（lavarel的ajax使用总结）

laravel基础课程---12、lavarel的ajax操作2（lavarel的ajax使用总结）

一、总结

一句话总结：

比较简单：就是js请求ajax，然后控制器获取请求参数，返回数据即可

1、laravel修改某个板块修改图片中 form的目标地址action如何写？

路径带参数+路由参数：form action="/admin/pic/{{$data->id}}"：这样传过来的路由参数（比如id）在控制器中用一个变量接收就好

2、lavarel查看页面提交的所有数据？

Request对象的all()方法

3、比如修改某个板块操作需要做成无刷修改么？

不需要，直接跳回列表页面即可

4、修改板块（板块中带图片）操作需要注意的是什么？

删除原图操作：原图和新图是否一样，不一样就删除原图

5、无刷新分页的实现思路及原理？

数据库实现原理：分页的原理 limit

思路一：vue双向绑定+ajax（推荐）：

思路二：控制器直接返回分页页面数据

1、分页的原理 limit
    1  0,3
    2  3,3
    3  6,3

6、最基本 的分页实现思路？

控制器：确定分页和页数和每页显示的数据

视图：ajax请求分页 + 遍历输出分页图标

控制器返回的数据：分页视图要显示的数据 ：和我项目中的一样

<!-- 分页效果 -->
<div class="panel-footer">
    <nav style="text-align:center;">
        <ul class="pagination">
            @for($i=1;$i<=$page;$i++)
            
                <li><a href="javascript:;" onclick="page1(this,{{$i}})">{{$i}}</a></li>
            @endfor
        </ul>
    </nav>

</div>

// 无刷新的分页

function page(obj,page){

    // 发送ajax请求
    var str='<tr><th><input type="checkbox" name="" id=""></th><th>ID</th><th>TITLE</th><th>SORT</th><th>IMG</th><th>操作</th></tr>';
    $.get('/admin/pic',{'page':page},function(data){
        // 处理数据

        for(var i=0;i<data.length;i++){

            str+='<tr id="tr'+data[i].id+'">';
            str+='<td><input type="checkbox" value="'+data[i].id+'" name="" class="inputs" id=""></td>';
            str+='<td>'+data[i].id+'</td>'
            str+='<td>'+data[i].title+'</td>'
            str+='<td><input type="text" onchange="change(this,'+data[i].id+'" value="'+data[i].sort+'" name="" id=""></td>'
            str+='<td><img width="200px" src="/Uploads/Goods/'+data[i].img+'" alt=""></td>'
            str+='<td><a href="/admin/pic/'+data[i].id+'/edit" class="glyphicon glyphicon-pencil"></a>&nbsp;&nbsp;&nbsp;<a href="javascript:;" onclick="del(this,'+data[i].id+')" class="glyphicon glyphicon-trash"></a></td>';
            str+='</tr>';
        }

        // 写入到表格中

        $("#table").html(str);
    });
}

控制器

// 后台商品管理首页方法

public function index(){

    // 计算数据的总条数

    $tot=DB::table("pic")->count();

    // 每页展示几条数据
    $length=3;

    // 计算总页数

    $page=ceil($tot/$length);

    // 判断地址栏参数是否存在


    if (isset($_GET['page'])) {
        // 计算分页

        $offset=($_GET['page']-1)*$length;

        // 进行数据库查询
        $data=DB::select("select * from pic order by sort asc limit $offset,$length");
        // 返回JSON
            // return $data;

        // 返回页面
            return view('admin.pic.page')->with('data',$data);


    }


    // 从数据库中读取相关数据

    $data=DB::select("select * from pic order by sort asc limit 0,$length");

    // dd($data);

    // 加载用户管理页面
    return view('admin.pic.index')->with('data',$data)->with('page',$page);
}

7、做无刷新分页的时候，如果不用vue双向绑定，直接用php来实现，那么更新分页数据会需要非常麻烦复杂的在js中的拼接 html代码，如何解决？

新弄了一个page页面：直接在控制器中返回这个页面：这样不用拼接复杂的html代码

直接在控制器中返回一个page页面：在页面中 刷新page数据（是一个page页面）：return view('admin.pic.index')->with('data',$data)->with('page',$page);

控制器

// 后台商品管理首页方法

public function index(){

    // 计算数据的总条数

    $tot=DB::table("pic")->count();

    // 每页展示几条数据
    $length=3;

    // 计算总页数

    $page=ceil($tot/$length);

    // 判断地址栏参数是否存在


    if (isset($_GET['page'])) {
        // 计算分页

        $offset=($_GET['page']-1)*$length;

        // 进行数据库查询
        $data=DB::select("select * from pic order by sort asc limit $offset,$length");
        // 返回JSON
            // return $data;

        // 返回页面
            return view('admin.pic.page')->with('data',$data);


    }


    // 从数据库中读取相关数据

    $data=DB::select("select * from pic order by sort asc limit 0,$length");

    // dd($data);

    // 加载用户管理页面
    return view('admin.pic.index')->with('data',$data)->with('page',$page);
}

function page1(obj,page){

    // 发送ajax请求
    
    $.get('/admin/pic',{'page':page},function(data1){
        // 处理数据

        alert($("#main").html());
        $("#main").html(data1);

    });
}

page.blade.php

<th><input type="checkbox" name="" id=""></th>
<th>ID</th>
<th>TITLE</th>
<th>SORT</th>
<th>IMG</th>
<th>操作</th>

@foreach($data as $value)
<tr id="tr{{$value->id}}">
    <td><input type="checkbox" value="{{$value->id}}" name="" class="inputs" id=""></td>
    <td>{{$value->id}}</td>
    <td>{{$value->title}}</td>
    <td><input type="text" onchange="change(this,{{$value->id}})" value="{{$value->sort}}" name="" id=""></td>
    <td><img width="200px" src="/Uploads/Goods/{{$value->img}}" alt=""></td>
    <td><a href="/admin/pic/{{$value->id}}/edit" class="glyphicon glyphicon-pencil"></a>&nbsp;&nbsp;&nbsp;<a href="javascript:;" onclick="del(this,{{$value->id}})" class="glyphicon glyphicon-trash"></a></td>
</tr>

@endforeach

二、内容在总结中