使用Laravel框架怎么實現一個即點即改功能

這期內容當中小編將會給大家帶來有關使用Laravel框架怎么實現一個即點即改功能，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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框架怎么實現一個即點即改功能了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。