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、內容在總結中