作者firetim (firetim)
看板Soft_Job
標題[請益] Ajax傳值到後端問題
時間Wed Oct 21 23:39:53 2020
各位大神好：
這兩天自己用Google Map API 弄一個地址查詢
在做連動式下拉選單時抓不到 Ajax 傳的值
不論用$request, $_GET 或 $_POST 裡頭都是空的
Ajax 用GET 或 POST 傳都一樣
而我自己在後端固定抓某筆資料庫的資料以 JSON 傳送
或是傳一筆假資料以 JSON 傳送又是成功能送回前端使選單連動
但就是改回由收到 Ajax 送的來資料再進資料庫找就會失敗
Ajax 那裡自己用 console.log('city') 確實是有東西的
已經困兩天了，找了好多網站和能問的人也是沒解
不曉得問題出在哪？有點開始懷疑是不是作業系統的編碼問題
－－－－－－－－－－－－－－－－
以下是東西的Github
https://github.com/snowtim/damaiquiz_googlemap
Ajax 寫的部分在/resources/views/googlemap.blade.php 裡面
第105行開始
後端寫在/app/Http/Controllers/AddressController.php裡面
citylinkarea 那個 function
將 Ajax 引到 controller 的 route 寫在/routes/web.php
當中Route::post('/citylinkarea, ..........) 那行
作業系統:Ubuntu
後端
語言:PHP
資料庫:MySQL
框架:Laravel
謝謝~
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 61.224.206.23 (臺灣)
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Soft_Job/M.1603294796.A.19A.html
1F：→ kingofsdtw: php fpm 預設首頁不是有範例？ 10/21 23:54
2F：→ codepo: 你要不要直接說是哪一個檔案哪一行code? 10/22 00:01
忘記了~已補上
※ 編輯: firetim (61.224.206.23 臺灣), 10/22/2020 00:18:40
3F：推 BigTounge: ajax的data先用JSON.stringfy試試看 10/22 00:30
4F：→ BigTounge: 然後其實有php版跟ajax版比較適合問 10/22 00:32
5F：推 jack0204: 你有沒有開csrf token? 10/22 00:33
有哦~我有開
6F：→ BigTounge: 打錯了 更正JSON.stringify 10/22 00:33
還是一樣,不管是GET或POST都同樣情形,就是當後端回傳值寫死能正常回傳
只要改回非寫死的話，除了POST我沒辦法用window.location進去看,會跑出
The GET method is not supported for this route. Supported methods: POST.
還有POST非寫死後端傳回來會出現
http://127.0.0.1:8000/citylinkarea 500 (Internal Server Error)詢息外
GET就是單純沒變化,然後同樣都會執行寫在Ajax的error情形詢息
※ 編輯: firetim (61.224.206.23 臺灣), 10/22/2020 01:25:33
7F：→ bigtongue: 沒寫過laravel 但是我看你取參數的方法跟官網寫的不太 10/22 01:35
中文的版本停在5,不過當時用過5.6和5.7自己的取法是可以的
然後現在Google Map這個是版本是8的,但下方另一個function還是可以取到
9F：推 MyNion: 可惜偶4寫C#的，不然我之前專題也是弄串接Google Map API 10/22 01:46
10F：→ MyNion: 然後用AJAX取值來動態改畫面呈現 10/22 01:46
地圖是可以出現,用寫死的假資料也能標出地點
現在卡在查詢地點這裡辦法繼續下去
11F：→ plcder: ajax裡面的type改成method應該就可以我之前也是用type無效 10/22 01:47
謝謝~還是相同情況QQ~一直卡在這裡
後面的雖然有先寫不過沒辦法跑完全部
根本不知道還會有什麼問題QQ~
※ 編輯: firetim (61.224.206.23 臺灣), 10/22/2020 02:03:05
※ 編輯: firetim (61.224.206.23 臺灣), 10/22/2020 02:05:12
※ 編輯: firetim (61.224.206.23 臺灣), 10/22/2020 02:05:42
12F：→ wesley84212: 弱弱的想請問一下，如果把 method的 request['city'] 10/22 02:26
13F：→ wesley84212: 換成$request->city這樣呢 10/22 02:26
也可以哦~自己試過兩種都取得到
只是我的問題還是一樣
在citylinkarea的function裡加了一段$request['city']沒值的回傳詢息
結果都會跑到這一段去
※ 編輯: firetim (61.224.206.23 臺灣), 10/22/2020 02:34:02
14F：→ bigtongue: 建議你可以先在發送請求時看request的body 10/22 02:35
15F：→ bigtongue: 然後直接debug看request接收到了什麼東西 10/22 02:37
有~request的body都只有關於來源位址的資料
但就是沒Ajax送來的東西
換成看$_GET, $_POST裡頭也OA都是空的
16F：→ wesley84212: 先console一下post到api之前的body看有沒有問題、然 10/22 02:37
17F：→ wesley84212: 後再看一下傳到laravel的內容？ 可能key的大小寫打錯 10/22 02:37
18F：→ wesley84212: 之類的XD 10/22 02:37
您是指在data這裡打成data:console.log({City: city})這樣嗎？
我這樣打過console出來是有東西的
19F：→ bigtongue: 因為我看你js的city的c是大寫php卻是用小寫取 10/22 02:37
20F：→ yeeeeell: data: {city: city} 大小寫? 10/22 02:40
21F：→ wesley84212: Body是data: {City: city｝ 10/22 02:42
22F：→ wesley84212: 不過php裡面是request[‘city’] 感覺怪怪的 10/22 02:42
大小寫都有試過~不過還是一樣的情形
※ 編輯: firetim (61.224.206.23 臺灣), 10/22/2020 04:26:27
23F：→ j269587: Controller的citylinkarea內 10/22 07:27
24F：→ j269587: 加個if($request->ajax()){} 10/22 07:29
25F：→ j269587: 把你其他原本寫的都寫在這裡面試試 10/22 07:29
謝謝~不過還是一樣，然後我進去看dd($request->ajax()),是false
會不會是少引入了什麼?
※ 編輯: firetim (61.224.206.23 臺灣), 10/22/2020 08:05:53
※ 編輯: firetim (61.224.206.23 臺灣), 10/22/2020 08:09:32
26F：推 windclara: 最好大小寫保持一致。有時這種小坑會害你浪費好多天 10/22 08:12
謝謝您的提醒~一開始自己是寫一致的
後來一直試沒效才開始大小寫交叉寫想了解是不是有什麼地方是規定一定得大寫自己不知道
27F：推 alihue: CORS? 有開 browser console 看 log 嗎 10/22 09:21
是指開發人員工具最下面那格嗎?自己知道能看的地方都有開, 不曉得這是不是您說的?
28F：推 wesley84212: 還有一個問題是，你的HTML select option 只有給他te 10/22 09:33
29F：→ wesley84212: xt 沒有設定value? 10/22 09:33
30F：→ wesley84212: <option value=‘’>{{ $city->city}}<option> 10/22 09:33
31F：→ wesley84212: 然後下面用.val() 10/22 09:33
32F：→ wesley84212: 還是就是要拿text而已 那當我沒說XD 10/22 09:34
謝謝您~這裡的確是自己沒弄好,已經改了
33F：→ gundamew: 官方文件有寫 $request->input('name') 10/22 12:05
34F：→ gundamew: 然後雖然自己寫的專案沒差，但還是建議加個 validator 10/22 12:06
35F：→ gundamew: $request->ajax() 是判斷 request 種類，回 bool 正常 10/22 12:07
原來是這樣~了解了
官方文件寫的$request->input('name')我當時也有這樣寫過,但狀況一樣
所以當下覺得應該是在東西傳到後端這部分有問題,不過一直當時找不出原因
validator因為這個東西有時間壓力所以想說至少要把功能做出來
等功能OK我再回來補一些接收資料處理的間題,謝謝
36F：→ yyc1217: 用網址帶參數的方式測試$_GET能否取值（query parameter) 10/22 12:53
37F：→ yyc1217: 用$_POST的話要注意雖然method都是post 但ajax跟html for 10/22 12:56
38F：→ yyc1217: m submit出去的request格式不一樣 10/22 12:56
39F：→ yyc1217: 不過記得laravel已針對這點處理過了 10/22 12:56
嗯~謝謝,最後有找到問題了~ssccg大的解答
40F：推 OriginStar: 問題解決了嗎，沒用過Laravel，查了一下網路資料 10/22 13:09
41F：→ OriginStar: web.php只有Route::post('/citylinkarea' 10/22 13:10
42F：→ OriginStar: 所以用get method拒絕是合理的吧 10/22 13:11
43F：→ OriginStar: 另外Laravel官方文件說會以json array的方式回覆 10/22 13:12
44F：→ OriginStar: AddressController.php寫死的範例看來是json array 10/22 13:14
45F：→ OriginStar: 從DB撈的部分原PO自行確認有沒有轉換 10/22 13:14
46F：推 OriginStar: 應該說data是array回覆的話，content-type會自動是 10/22 13:33
47F：→ OriginStar: application/json，不用自己處理，其端才能正確解析 10/22 13:34
解決了~配合您和ssccg大的解答已弄出來T T
謝謝您
48F：→ ssccg: 首先你的ajax的request的ontent-type要設成json 10/22 14:45
49F：→ ssccg: $.ajax的dataType是預期response的type (Accept header) 10/22 14:48
50F：→ ssccg: 要用contentType: 'application/json' 10/22 14:49
51F：→ ssccg: 然後同上面有人提過的，要看實際送出的HTTP request，要看 10/22 14:56
52F：→ ssccg: 瀏覽器開發者工具的Network那頁 10/22 14:57
53F：→ ssccg: 會發現照你的$.ajax寫法，送出的Content-Type是application 10/22 14:58
54F：→ ssccg: /x-www-form-urlencoded，Body的內容是JSON沒錯，但是在這 10/22 14:58
55F：→ ssccg: 種Content-Type下body的格式是key1=value1&key2=value2... 10/22 14:59
56F：→ ssccg: 會解析成整個JSON字串是key對應到空白value 10/22 15:00
57F：→ ssccg: 是說我不確定你最早的版本長怎樣，以現在的來說其實沒必要 10/22 15:27
58F：→ ssccg: Request用json(不要JSON.stringfy)，預設的方式就好 10/22 15:34
感謝ssccg大~問題確實出在應該用contentType: 'application/json'
我最一開始版本是用dataType: "JSON",不過當時一樣沒有用
我放上去的是弄一段時間休息就傳上去的
目前連動已經可以了~謝謝~
感謝上面各位的幫忙!!也讓我多學到不少,為了這個弄了好多天QQ~
※ 編輯: firetim (36.235.51.151 臺灣), 10/23/2020 01:55:18
※ 編輯: firetim (36.235.51.151 臺灣), 10/23/2020 01:58:16