本文實例講述了Laravel框架實現即點即改功能的方法。分享給大家供大家參考，具體如下：
有的時候我們不需要更改大量數據,只需要更改一個字段的時候,我們就用到了即點即改,以用戶模塊,修改用戶名稱為例,下圖為我的展示模塊
當我們點擊用戶名時,會出現一個修改框,那么這個修改框是怎么來的呢?
我們點擊時,隱藏在這個td當中的修改框會出現,而展示時的用戶名會隱藏起來,我們怎么利用代碼實現?
td onclick="saveuser({{$v->id}})">
span id="bbb{{$v->id}}">{{$v->username}}/span>
input type="text" value="{{$v->username}}" style="display:none" id="aaa{{$v->id}}"
onblur="edituser({{$v->id}})">
/td>
從上述代碼中我們可以看到一個存放用戶名的span標簽,還有一個默認為隱藏的input框,用來存放用戶名,接下來我們要做的就是:通過相應的點擊事件,實現即點即改;在修改數據時,我們盡量要根據他的唯一字段id進行修改,避免出錯:
首先,我在頁面顯示span標簽當中起了一個id,名為 “bbb”+用戶的id,在隱藏的input中id為 “aaa”+用戶的id,在相應點擊事件中存放id,方便ajax取用戶的id值;
接下來就是通過ajax技術,傳遞相應id值,以及要修改的數據到控制器,進行相應的修改:
1)首先引入jquery文件
script src="{{asset('Follow')}}/js/jquery.min.js">/script>
2)點擊事件:當我們點擊時,span標簽內容設置為空值,input標簽出現
function saveuser(id){
document.getElementById('aaa'+id).style.display='block';//顯示input
document.getElementById('bbb'+id).innerHTML="";//span標簽的值設置為空
}
3)輸入我們需要修改的數據,如下圖:
4)要修改的數據寫完之后,就到了最關鍵的時候,怎樣進行修改?
通過上面,可以看到input有一個失去焦點事件,因此我在這個事件里進行ajax請求
function edituser(id){
var username = document.getElementById('aaa'+id).value;//獲取文本框的值
$.ajax({
type:'GET',//請求方式
data:{'id':id,'username':username},//傳遞參數
url:"{{url('edituser')}}",//地址
success:function(e){//回調
if(e==1){
document.getElementById('aaa'+id).style.display = 'none';//如果修改成功,input隱藏
document.getElementById('bbb'+id).innerHTML = username;//修改成功,將表里修改后的數據賦值給span標簽
}else{
alert('修改失敗');
window.location.reload();
}
}
})
}
5)通過ajax傳遞的參數,進行數據查詢和修改:
首先我們在控制器接收:
public function edituser(){
$arr = Input::get();//接收ajax傳遞的參數
$result = BlueShop::useredit($arr);//調用模型,并將接收到的 id 和要修改的數據賦給模型
if($result){
$status = 1;
}else{
$status = 2;
}
return $status;//將結果返回給展示頁面
}
然后我們在模型進行我們的邏輯代碼部分
//$arr數組 $arr['id'] 用戶id $arr['username']要修改的用戶名
public static function useredit($arr){
$res = DB::table('jy_user')->where('id',$arr['id'])->update($arr);//通過id修改
return $res;//返回結果
}
6)此時我們可以看到,頁面已經修改
而數據表中的數據也進行了更新
這就是一個簡單的即點即改,希望對大家能有所幫助!!!
更多關于Laravel相關內容感興趣的讀者可查看本站專題：《Laravel框架入門與進階教程》、《php優秀開發框架總結》、《php面向對象程序設計入門教程》、《php+mysql數據庫操作入門教程》及《php常見數據庫操作技巧匯總》
希望本文所述對大家基于Laravel框架的PHP程序設計有所幫助。
您可能感興趣的文章:- 教你一步步實現Android微信自動搶紅包
- java模擬微信搶紅包的實例代碼
- IOS 實現微信自動搶紅包（非越獄IPhone）
- 詳解利用redis + lua解決搶紅包高并發的問題
- js仿微信搶紅包功能
- laravel框架實現后臺登錄、退出功能示例
- laravel 實現用戶登錄注銷并限制功能
- 利用laravel+ajax實現文件上傳功能方法示例
- laravel框架關于搜索功能的實現
- Laravel框架實現利用中間件進行操作日志記錄功能
- Laravel框架實現搶紅包功能示例
