laravel基础课程---十一、lavarel的ajax操做（ajax优劣势是什么）

laravel基础课程---十一、lavarel的ajax操做（ajax优劣势是什么）

1、总结

一句话总结：

优点：用户友好度：异步通讯，不会频繁刷新页面，用户友好度比较高

优点：减轻数据库压力

缺点：操做难度相对普通请求大

 

一、无刷新上传图片如何实现？

找一个无刷新图片上传插件【好比uploadify】，页面中引入插件

路由中any接收一切请求类型：Route::any('shangchuan','CommonController@upload');

控制器中用 Request $request对象获取图片数据便可：都不用像tp同样判断是否是ajax请求

0、插件学习地址 http://www.uploadify.com/demos/
一、页面中必须引入插件 (D:\laravel\yzmedu\yzm2\resources\views\admin\pic\create.blade.php) <!-- 引入CSS -->
    <link rel="stylesheet" href="/up/uploadify.css">
    <!-- 引入JQ -->
    <script src="/admins/bs/js/jquery.min.js"></script>
    <!-- 引入文件上传插件 -->
    <script src="/up/jquery.uploadify.min.js"></script>

2、页面中书写页面结构 <div class="form-group">
        <label for="">IMG</label>
        <input type="file" name="" id="uploads">
        <div id="main">
            
        </div>
        <input type="hidden" name="img" id="imgs">
    </div>

3、JS代码 // 当全部HTML代码都加载完毕
    $(function() { // 声明字符串

        var imgs=''; // 使用 uploadify 插件
        $('#uploads').uploadify({ // 设置文本
            'buttonText' : '图片上传 美照',
            // 设置文件传输数据
            'formData'     : { '_token':'{{ csrf_token() }}',
                'files':'Goods', },
            // 上传的flash动画
            'swf'      : "/up/uploadify.swf",
            // 文件上传的地址
            'uploader' : "/admin/shangchuan",
            // 当文件上传成功
            'onUploadSuccess' : function(file, data, response) { // 拼接图片
                imgs="<img width='200px'  src='/Uploads/Goods/"+data+"'>"; // 展现图片
                $("#main").html(imgs); // 隐藏传递数据
                $("#imgs").val(data); } }); }); 4、路由地址 Route::any('shangchuan','CommonController@upload'); 5、控制器 // 公共控制器
    class CommonController extends Controller { // 文件上传的方法

        public function upload(Request $request){ // 获取用户上传的内容
            $file=$request->file('Filedata'); // 判断目录是否存在
            $dir=$request->input('files'); if (file_exists("./Uploads/{$dir}")) { }else{ mkdir("./Uploads/{$dir}"); } // 判断上传的文件是否有效
            if ($file->isValid()) { // 获取后缀
                $ext=$file->getClientOriginalExtension(); // 生成新的文件名
                $newFile=time().rand().'.'.$ext; // 移动到指定目录
                $request->file('Filedata')->move('./Uploads/'.$dir,$newFile); echo $newFile; } } }

 

 

二、无刷新上传，上传好的图片如何显示？

插入一个img标签就好：将插入成功的img的url放进img标签中，而后将这个img标签插入到html中，浏览器没有这个img资源会自动请求的

// 拼接图片
imgs="<img width='200px'  src='/Uploads/Goods/"+data+"'>"; // 展现图片
$("#main").html(imgs); // 隐藏传递数据
$("#imgs").val(data);

 

 

三、图片无刷新上传以后，提交页面，图片路径如何传到服务器？

无刷新上传成功以后，将 图片的路径 给一个 隐藏input标签，让这个标签将数据传到服务器

 

四、ajax删除数据以后，刷新原页面数据的思路？

若是vue遍历输出数据（vue方便不少）：这样返回的数据就带 列表数据

若是php遍历输出数据（还要改其它相关变量，好比总数据条数）：能够用jquery直接删除元素

 

五、删除数据记录以后如何删除记录图片字段对应的图片？

查询图片的地址：$data=\DB::select("select * from pic where id=$id");

unlink方法删除图片：unlink("./Uploads/Goods/{$data[0]->img}");

 

public function destroy(Request $request){ // 获取删除ID

    $id=$request->input('id'); // 查巡图片 
    $data=\DB::select("select * from pic where id=$id"); // 删除操做 // 删除成功 返回值1 // 删除失败 返回值0


    if (\DB::delete("delete from pic where id=$id")) { # code... // 删除成功 删除图片
        unlink("./Uploads/Goods/{$data[0]->img}"); return "1"; }else{ return "0"; } }

 

 

六、laravel的ajax如何批量删除数据？

传递id数组的字符串过去便可：并且就算是数组也能够转化成json字符串

无刷新批量删除(ajax) 1、JQ // 批量删除方法

function delAll(){ // 获取被选中数据的值
    var arr=[]; // 获取全部的数据 而且是被选中的
    inputs=$(".inputs:checked"); // 获取选中数据的value值
    for (var i = inputs.length - 1; i >= 0; i--) { // 把值压入到数组
        arr.push(inputs.eq(i).val()); }; // 把arr转换成字符串
    str=arr.join(','); // 发送ajax请求
    $.post('/admin/pic/delAll',{'str':str,'_token':'{{csrf_token()}}'},function(data){ // 判断数据是否删除成功
        if (data==arr.length) { // 移除对应的数据
            for (var i = arr.length - 1; i >= 0; i--) { $("#tr"+arr[i]).remove(); }; // 修改数据个数
            tot=Number($("#tot").html())-Number(data); $("#tot").html(tot); }else{ alert('删除失败'); } }); } 2、控制器 public function delAll(Request $request){ $str=$request->input('str'); $data=\DB::select("select * from pic where id in($str)"); // 执行删除语句

    if ($a=\DB::delete("delete from pic where id in($str)")) { # code... // 删除图片
        foreach ($data as $value) { unlink("./Uploads/Goods/{$value->img}"); } return $a; }else{ return 0; } }

 

 

 

七、ajax如何传数组数据到服务器？

json字符串

 

八、无刷新排序如何实现？

数据库：增长排序字段

html：显示排序字段的input框的onchange方法（onchange方法应该是失去焦点后才触发）

js：总体刷新排序仍是用的reload方法：window.location.reload();

无刷新排序(ajax)

 1、JQ // 无刷新排序

function change(obj,id){ // 获取ID // 获取用户修改的值
 val=$(obj).val(); // 发送ajax请求
 $.post('/admin/pic/sort',{'id':id,'val':val,'_token':'{{csrf_token()}}'},function(data){ // 判断师傅修改为功
        if (data==1) { // 页面自动刷新
            window.location.reload(); }else{ alert('修改失败'); } }); } 2、控制器 public function sort(Request $request){ // 修改数据库

    if (\DB::update("update pic set sort={$request->input('val')} where id={$request->input('id')}")) { # code...

        echo "1"; }else{ echo 0; } }

 

 

 

九、js函数经常使用格式（带不带this）？

能够第一个参数都把本对象的this带上：好比 onchange="change(this,{{$val->id}})"

 

 

十、ajax的使用实例？

[百度搜索 提示关联词]

[加载更多]

[瀑布流]

 

 

2、内容在总结中