laravel基础课程---11、lavarel的ajax操作（ajax优劣势是什么）

时间：2021-12-23 06:44:47

laravel基础课程---11、lavarel的ajax操作（ajax优劣势是什么）

一、总结

一句话总结：

优势：用户友好度：异步通信，不会频繁刷新页面，用户友好度比较高
优势：减轻数据库压力
缺点：操作难度相对普通请求大

 

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

找一个无刷新图片上传插件【比如uploadify】，页面中引入插件
路由中any接收一切请求类型：Route::any('shangchuan','CommonController@upload');
控制器中用 Request $request对象获取图片数据即可：都不用像tp一样判断是不是ajax请求
0、插件学习地址
    http://www.uploadify.com/demos/
1、页面中必须引入插件 (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;
            }
        }
    }

 

 

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

插入一个img标签就好：将插入成功的img的url放进img标签中，然后将这个img标签插入到html中，浏览器没有这个img资源会自动请求的 
// 拼接图片
imgs="<img width='200px'  src='/Uploads/Goods/"+data+"'>";
// 展示图片
$("#main").html(imgs);
// 隐藏传递数据
$("#imgs").val(data);

 

 

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

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

 

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

如果vue遍历输出数据（vue方便很多）：这样返回的数据就带 列表数据
如果php遍历输出数据（还要改其它相关变量，比如总数据条数）：可以用jquery直接删除元素

 

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

查询图片的地址：$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";
    }

}

 

 

6、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;
    }
}

 

 

 

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

json字符串

 

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

数据库：增加排序字段
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;
    }
}

 

 

 

9、js函数常用格式（带不带this）？

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

 

 

10、ajax的使用实例？

[百度搜索 提示关联词]
[加载更多]
[瀑布流]

 

 

二、内容在总结中

laravel基础课程---11、lavarel的ajax操作（ajax优劣势是什么）

 

 

 

 
标签：

相关文章