laravel基礎(chǔ)課程---11、lavarel的ajax操作（ajax優(yōu)劣勢(shì)是什么）

一、總結(jié)

一句話總結(jié)：

優(yōu)勢(shì)：用戶友好度：異步通信，不會(huì)頻繁刷新頁面，用戶友好度比較高

優(yōu)勢(shì)：減輕數(shù)據(jù)庫壓力

缺點(diǎn)：操作難度相對(duì)普通請(qǐng)求大

?

1、無刷新上傳圖片如何實(shí)現(xiàn)？

找一個(gè)無刷新圖片上傳插件【比如uploadify】，頁面中引入插件

路由中any接收一切請(qǐng)求類型：Route::any('shangchuan','CommonController@upload');

控制器中用 Request $request對(duì)象獲取圖片數(shù)據(jù)即可：都不用像tp一樣判斷是不是ajax請(qǐng)求

0、插件學(xué)習(xí)地址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、頁面中書寫頁面結(jié)構(gòu)<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代碼// 當(dāng)所有HTML代碼都加載完畢$(function() {// 聲明字符串var imgs='';// 使用 uploadify 插件$('#uploads').uploadify({// 設(shè)置文本'buttonText' : '圖片上傳 美照',// 設(shè)置文件傳輸數(shù)據(jù)'formData' : {'_token':'{{ csrf_token() }}','files':'Goods',},// 上傳的flash動(dòng)畫'swf' : "/up/uploadify.swf",// 文件上傳的地址'uploader' : "/admin/shangchuan",// 當(dāng)文件上傳成功'onUploadSuccess' : function(file, data, response) {// 拼接圖片imgs="<img width='200px' src='/Uploads/Goods/"+data+"'>";// 展示圖片$("#main").html(imgs);// 隱藏傳遞數(shù)據(jù)$("#imgs").val(data);}});}); 4、路由地址Route::any('shangchuan','CommonController@upload');5、控制器// 公共控制器class CommonController extends Controller{// 文件上傳的方法public function upload(Request $request){// 獲取用戶上傳的內(nèi)容$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;// 移動(dòng)到指定目錄$request->file('Filedata')->move('./Uploads/'.$dir,$newFile);echo $newFile;}}}

?

?

2、無刷新上傳，上傳好的圖片如何顯示？

插入一個(gè)img標(biāo)簽就好：將插入成功的img的url放進(jìn)img標(biāo)簽中，然后將這個(gè)img標(biāo)簽插入到html中，瀏覽器沒有這個(gè)img資源會(huì)自動(dòng)請(qǐng)求的

// 拼接圖片 imgs="<img width='200px' src='/Uploads/Goods/"+data+"'>"; // 展示圖片 $("#main").html(imgs); // 隱藏傳遞數(shù)據(jù) $("#imgs").val(data);

?

?

3、圖片無刷新上傳之后，提交頁面，圖片路徑如何傳到服務(wù)器？

無刷新上傳成功之后，將 圖片的路徑 給一個(gè) 隱藏input標(biāo)簽，讓這個(gè)標(biāo)簽將數(shù)據(jù)傳到服務(wù)器

?

4、ajax刪除數(shù)據(jù)之后，刷新原頁面數(shù)據(jù)的思路？

如果vue遍歷輸出數(shù)據(jù)（vue方便很多）：這樣返回的數(shù)據(jù)就帶 列表數(shù)據(jù)

如果php遍歷輸出數(shù)據(jù)（還要改其它相關(guān)變量，比如總數(shù)據(jù)條數(shù)）：可以用jquery直接刪除元素

?

5、刪除數(shù)據(jù)記錄之后如何刪除記錄圖片字段對(duì)應(yīng)的圖片？

查詢圖片的地址：$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如何批量刪除數(shù)據(jù)？

傳遞id數(shù)組的字符串過去即可：而且就算是數(shù)組也可以轉(zhuǎn)化成json字符串

無刷新批量刪除(ajax)1、JQ // 批量刪除方法function delAll(){// 獲取被選中數(shù)據(jù)的值var arr=[];// 獲取所有的數(shù)據(jù) 并且是被選中的inputs=$(".inputs:checked");// 獲取選中數(shù)據(jù)的value值for (var i = inputs.length - 1; i >= 0; i--) {// 把值壓入到數(shù)組arr.push(inputs.eq(i).val());};// 把a(bǔ)rr轉(zhuǎn)換成字符串str=arr.join(',');// 發(fā)送ajax請(qǐng)求$.post('/admin/pic/delAll',{'str':str,'_token':'{{csrf_token()}}'},function(data){// 判斷數(shù)據(jù)是否刪除成功if (data==arr.length) {// 移除對(duì)應(yīng)的數(shù)據(jù)for (var i = arr.length - 1; i >= 0; i--) {$("#tr"+arr[i]).remove();};// 修改數(shù)據(jù)個(gè)數(shù)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)");// 執(zhí)行刪除語句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如何傳數(shù)組數(shù)據(jù)到服務(wù)器？

json字符串

?

8、無刷新排序如何實(shí)現(xiàn)？

數(shù)據(jù)庫：增加排序字段

html：顯示排序字段的input框的onchange方法（onchange方法應(yīng)該是失去焦點(diǎn)后才觸發(fā)）

js：整體刷新排序還是用的reload方法：window.location.reload();

無刷新排序(ajax)

1、JQ// 無刷新排序function change(obj,id){// 獲取ID// 獲取用戶修改的值 val=$(obj).val();// 發(fā)送ajax請(qǐng)求 $.post('/admin/pic/sort',{'id':id,'val':val,'_token':'{{csrf_token()}}'},function(data){// 判斷師傅修改成功if (data==1) {// 頁面自動(dòng)刷新window.location.reload();}else{alert('修改失敗');}}); }2、控制器 public function sort(Request $request){// 修改數(shù)據(jù)庫if (\DB::update("update pic set sort={$request->input('val')} where id={$request->input('id')}")) {# code...echo "1";}else{echo 0;} }

?

?

?

9、js函數(shù)常用格式（帶不帶this）？

可以第一個(gè)參數(shù)都把本對(duì)象的this帶上：比如 οnchange="change(this,{{$val->id}})"

?

?

10、ajax的使用實(shí)例？

[百度搜索 提示關(guān)聯(lián)詞]

[加載更多]

[瀑布流]

?

?

二、內(nèi)容在總結(jié)中

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/Renyi-Fan/p/10851000.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。