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// 刪除失敗 返回值0if (\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帶上：比如 οnchange="change(this,{{$val->id}})"

?

?

10、ajax的使用實例？

[百度搜索 提示關聯詞]

[加載更多]

[瀑布流]

?

?

二、內容在總結中

?

?

?

轉載于:https://www.cnblogs.com/Renyi-Fan/p/10851000.html

總結

以上是生活随笔為你收集整理的laravel基础课程---11、lavarel的ajax操作（ajax优劣势是什么）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。