Laravel Ajax Example

更新 發佈閱讀 3 分鐘

本文模擬user註冊的情境來簡單演示,在Laravel中如何透過ajax來存取資料,以post request為例。
前端透過post把user資料送到controller中,並且透過model把資料塞進DB,最後回傳json response。

程式碼如下:

raw-image
raw-image
raw-image
raw-image
raw-image
raw-image
raw-image

完整source code如下:
https://github.com/snailsmall612/laravel-ajax-example


如上圖,user輸入帳密後按下Register後,發出ajax post request送往UserController,成功將user新增至user table,並且回傳http response給前端。

其中,$.ajaxSetup是為了不用每次要送ajax request都要在header加上csrf token,透過這種方式,之後的request都會自動加上去。

另外,其實meta中不一定要放上csrf token,這只是為了讓js方便可以存取token而已,事實上只要request header中有帶即可,laravel後端收到request之後會比對跟session中的csrf token是否一致。


Note:

Laravel為了防禦CSRF攻擊,要求前端每次的request都必須加上csrf token,否則會出現419 (unknown status)。
如下圖,ajax request沒有帶上csrf token的結果:

raw-image


本筆記參考:
1. https://www.itread01.com/content/1547495466.html
2. https://www.yiibai.com/laravel/laravel_ajax.html
3. https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/104683/#outline__4

留言
avatar-img
Vic Lin的沙龍
20會員
161內容數
Vic Lin的沙龍的其他內容
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
看更多
你可能也想看
Thumbnail
債券投資,不只是高資產族群的遊戲 在傳統的投資觀念中,海外債券(Overseas Bonds)常被貼上「高資產族群專屬」的標籤。過去動輒 1 萬甚至 10 萬美元的最低申購門檻,讓許多想尋求穩定配息的小資族望而卻步。 然而,在股市波動劇烈的環境下,尋求穩定的美元現金流與被動收入成為許多投資人
Thumbnail
債券投資,不只是高資產族群的遊戲 在傳統的投資觀念中,海外債券(Overseas Bonds)常被貼上「高資產族群專屬」的標籤。過去動輒 1 萬甚至 10 萬美元的最低申購門檻,讓許多想尋求穩定配息的小資族望而卻步。 然而,在股市波動劇烈的環境下,尋求穩定的美元現金流與被動收入成為許多投資人
Thumbnail
透過川普的近期債券交易揭露,探討債券作為資產配置中「穩定磐石」的重要性。文章分析降息對債券的潛在影響,以及股神巴菲特的操作策略。並介紹玉山證券「小額債」平臺,如何讓小資族也能低門檻參與海外債券市場,實現「低門檻、低波動、固定收益」的務實投資方式。
Thumbnail
透過川普的近期債券交易揭露,探討債券作為資產配置中「穩定磐石」的重要性。文章分析降息對債券的潛在影響,以及股神巴菲特的操作策略。並介紹玉山證券「小額債」平臺,如何讓小資族也能低門檻參與海外債券市場,實現「低門檻、低波動、固定收益」的務實投資方式。
Thumbnail
解析「債券」如何成為資產配置中的穩定錨,提供低風險高回報的投資選項。 藉由玉山證券的低門檻債券服務,投資者可輕鬆入手,平衡風險並穩定財務。
Thumbnail
解析「債券」如何成為資產配置中的穩定錨,提供低風險高回報的投資選項。 藉由玉山證券的低門檻債券服務,投資者可輕鬆入手,平衡風險並穩定財務。
Thumbnail
相較於波動較大的股票,債券能提供固定現金流,而玉山證券推出的小額債,更以1000 美元的低門檻,讓學生與新手也能參與全球優質企業債投資。玉山E-Trader平台即時報價、條件式篩選與清楚的交易流程等特色,大幅降低投資難度,對於希望分散風險、建立穩定現金流的人來說,玉山小額債是一個值得嘗試的理財起點。
Thumbnail
相較於波動較大的股票,債券能提供固定現金流,而玉山證券推出的小額債,更以1000 美元的低門檻,讓學生與新手也能參與全球優質企業債投資。玉山E-Trader平台即時報價、條件式篩選與清楚的交易流程等特色,大幅降低投資難度,對於希望分散風險、建立穩定現金流的人來說,玉山小額債是一個值得嘗試的理財起點。
Thumbnail
本篇純粹紀錄實作流程,以方便未來可以照此版繼續優化改進作法,這篇會使用Laravel 9版本並搭配Boostrap 5來做開發。 發現將每一次的實作作筆記,回頭再看的時候,就可以發現實作差異並進行改正,沒搞懂的底層操作也能在覆盤的時候理解,建議大家都要筆記自己的實作流程。
Thumbnail
本篇純粹紀錄實作流程,以方便未來可以照此版繼續優化改進作法,這篇會使用Laravel 9版本並搭配Boostrap 5來做開發。 發現將每一次的實作作筆記,回頭再看的時候,就可以發現實作差異並進行改正,沒搞懂的底層操作也能在覆盤的時候理解,建議大家都要筆記自己的實作流程。
Thumbnail
今天要來分享關於 Laravel Request 概念,Request 代表了來自客戶端(瀏覽器)的HTTP請求。這個類型的物件允許您輕鬆地訪問HTTP請求中的各種數據,例如表單數據、路由參數、Cookie、HTTP標頭等。 現在我們來定義及應用吧!
Thumbnail
今天要來分享關於 Laravel Request 概念,Request 代表了來自客戶端(瀏覽器)的HTTP請求。這個類型的物件允許您輕鬆地訪問HTTP請求中的各種數據,例如表單數據、路由參數、Cookie、HTTP標頭等。 現在我們來定義及應用吧!
Thumbnail
Laravel Notifications(通知),是用來通知使用者應用程式訊息的功能,比如付款完成發送email或簡訊通知使用者,文章被訂閱通知等等。Notifications甚至還可以把通知訊息塞進DB,可以用來顯示在後台報表頁面中。 以下以發送email通知來舉例用法。 建立通知 發送通知
Thumbnail
Laravel Notifications(通知),是用來通知使用者應用程式訊息的功能,比如付款完成發送email或簡訊通知使用者,文章被訂閱通知等等。Notifications甚至還可以把通知訊息塞進DB,可以用來顯示在後台報表頁面中。 以下以發送email通知來舉例用法。 建立通知 發送通知
Thumbnail
在Laravel中除了用Validator來驗證資料,還可以用Form Request Validation,建立一個驗證class,在request進入controller之前,會先在這邊做驗證,若驗證失敗則不會繼續執行Controller。 建立form request: 範例程式碼:
Thumbnail
在Laravel中除了用Validator來驗證資料,還可以用Form Request Validation,建立一個驗證class,在request進入controller之前,會先在這邊做驗證,若驗證失敗則不會繼續執行Controller。 建立form request: 範例程式碼:
Thumbnail
Laravel設定 1. 安裝Socialite: 在之前的google第三方登入文章有提到,不再贅述。 2. .env新增: FB_CLIENT_ID=xxx FB_CLIENT_SECRET=xxx FB_REDIRECT=http://yourdomain/facebook/authCall
Thumbnail
Laravel設定 1. 安裝Socialite: 在之前的google第三方登入文章有提到,不再贅述。 2. .env新增: FB_CLIENT_ID=xxx FB_CLIENT_SECRET=xxx FB_REDIRECT=http://yourdomain/facebook/authCall
Thumbnail
本文使用網站的 FB 登入做示範 採用 Laravel 8 + Socialite 5 使用 Session 記錄狀態 不同版本可能會有些許語法及方法上的差異,請自行調整 前言 最近因為碰到需要實作 OAuth 第三方登入的需求,只好把之前隨便看看的東西撿回來研究並實作。不過我找到多數現存的中文文章
Thumbnail
本文使用網站的 FB 登入做示範 採用 Laravel 8 + Socialite 5 使用 Session 記錄狀態 不同版本可能會有些許語法及方法上的差異,請自行調整 前言 最近因為碰到需要實作 OAuth 第三方登入的需求,只好把之前隨便看看的東西撿回來研究並實作。不過我找到多數現存的中文文章
Thumbnail
如上篇,Laravel JWT預設只能認證一種user,但實務上我們可能有不同的role需要各自做Authentication,例如我們有管理員、客戶、員工,等等。 Note: 小弟一開始是參考了網路上各種教學,但都是Laravel較舊版本的教學,經測試在Laravel 8無法work(也有可能是我
Thumbnail
如上篇,Laravel JWT預設只能認證一種user,但實務上我們可能有不同的role需要各自做Authentication,例如我們有管理員、客戶、員工,等等。 Note: 小弟一開始是參考了網路上各種教學,但都是Laravel較舊版本的教學,經測試在Laravel 8無法work(也有可能是我
Thumbnail
本文模擬user註冊的情境來簡單演示,在Laravel中如何透過ajax來存取資料,以post request為例。 前端透過post把user資料送到controller中,並且透過model把資料塞進DB,最後回傳json response。 完整source cod
Thumbnail
本文模擬user註冊的情境來簡單演示,在Laravel中如何透過ajax來存取資料,以post request為例。 前端透過post把user資料送到controller中,並且透過model把資料塞進DB,最後回傳json response。 完整source cod
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News