Laravel Ajax Example

2020/11/03閱讀時間約 2 分鐘

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

程式碼如下:

完整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的結果:

本筆記參考:
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

為什麼會看到廣告

#Laravel

#Ajax

Vic Lin的沙龍

20會員

161內容數

留言0

查看全部

發表第一個留言支持創作者！

Vic Lin的沙龍的其他內容

Cross-Site Scripting 攻擊

閱讀時間約 1 分鐘

防禦XSS攻擊

閱讀時間約 3 分鐘

CSRF攻擊與防禦

閱讀時間約 12 分鐘

SQL Injection 攻擊與防禦

閱讀時間約 3 分鐘

在Windows 安裝 Laravel 環境

閱讀時間約 2 分鐘

Laravel 8 Hello World

閱讀時間約 1 分鐘

你可能也想看

創作者要怎麼好好休息 + 避免工作過量？《黑貓創作報#4》午安，最近累不累？這篇不是虛假的關心。而是《黑貓創作報》發行以來可能最重要的一篇。是的，我們這篇講怎麼補充能量，也就是怎麼休息。

黑貓老師

2024-06-29

#創作 #作者 #社群

[Laravel] 設定並上傳檔案到AWS S3Simple Storage Service (S3) 是 AWS 最常應用到的服務，只要是需要將檔案上傳到雲端的狀況都可以使用S3，本篇文章將介紹如何設定與使用AWS S3。

Hankz

2024-03-20

#Laravel #AWS #S3

[Laravel] 使用Supervisor執行Laravel的Queue Worker在使用laravel中的Queue job的時候如果希望job中斷還可以重新啟動這個時候就會需要用到Supervisor了本篇文章為您帶來如何使用Supervisor執行Laravel的queue:work的教學

Hankz

2024-03-13

#PHP #Laravel #Queue

[Laravel] 客製化你的Laravel: macro有的時候，會希望在物件導向中對原生的Class新增功能的時候，大多我們都會寫一個新的class並繼承。但是其實Laravel提供了一個不同的方式，讓我們可以在常用的Class上，直接新增想要的function，那就是macro。

Hankz

2024-03-04

#Laravel #PHP

Laravel的migration簡介Migration在 Laravel 中是一種用來管理資料庫結構變更的機制。它的主要目的是使開發者能夠在應用程序的不同環境中保持資料庫結構的一致性，並輕鬆地進行結構變更

傑克李

2024-01-04

Laravel 安全性，七種開發人員常犯的錯誤待業中後，發現時間變很多就開始東看看西看看，思考著要如何更深入理解Laravel框架的運用，而在Laravel框架中哪些部分是框架替我們做了哪些處理，推薦一個影片給大家一起學習理解。

DDDDD

2023-12-13

#Laravel #XSS #閱讀筆記

[13] Compare axios, ajax, fetch接下來要講前後端怎麼溝通，最常見應該都是用 axios, ajax 或 fetch 來 call api。先講結論，個人推薦使用 axios，那他們又有什麼優缺點呢？讓我簡單講解一下 ajax ajax 用法有點麻煩，要先引入 jQuery，用法如下 ajax 比起 axios 較為笨重也較不安全

張哲嘉

2022-10-07

#python

AJAX -axios套件學習筆記如有需要可以不用浪費效能重新將整個頁面重新載入，可以使用非同步的JS，使用動態載入資料

阿君啊

2022-09-30

#axios #Fetch #XMLHttpRequest

學期2-2 : Week 1 API & Ajax：串接第三方資料 ORID Objective 因後面有幾個周末無法全空下時間學習，最近又因為專案開始進行常常會加班，為使課程可於期限內完成，為自己設定的目標就是在7/18學期2-2開始前至少完成一周的作業。現在看來至少是完成了最低的標準，並提前開始下週進度。 Reflective Interpretive

Blockcyber

2022-07-18

#ORID #自學 #轉職