ajax搭配PHP將文字資料存入資料庫

在沒有使用ajax將資料從前端往後端傳輸之前，一般的作法都是用HTML的form把表單包起來，然後在action與method的地方設定傳輸參數丟給後端處理，像是：

[pastacode lang=”markup” manual=”%3Cform%20action%3D’res.php’%20method%3D’post’%3E%0A%20%20%20%3Cinput%20name%3D’name’%20type%3D’text’%3E%0A%20%20%20%3Cinput%20name%3D’submit’%20type%3D’submit’%3E%0A%3C%2Fform%3E” message=”” highlight=”” provider=”manual”/]

這樣後端的res.php頁面就可以透過POST取得name的值作處理（通常是INSERT INTO資料庫）：

[pastacode lang=”php” manual=”%3C%3F%0Arequire_once(‘connect.php’)%3B%2F%2F%E5%BC%95%E5%85%A5%E8%B3%87%E6%96%99%E5%BA%AB%E9%80%A3%E7%B5%90%E8%A8%AD%E5%AE%9A%E6%AA%94%0A%24name%20%3D%20%24_POST%5B’name’%5D%3B%2F%2F%E5%8F%96%E5%BE%97name%E5%80%BC%0A%24sql%20%3D%20%22INSERT%20INTO%20%E8%A1%A8%E6%A0%BC%E5%90%8D%E7%A8%B1%20(%E6%AC%84%E4%BD%8D%E5%90%8D%E7%A8%B1)%20VALUES%20(‘%24name’)%20%22%3B%2F%2F%E6%8F%92%E5%85%A5%E8%A1%A8%E6%A0%BC%E8%AA%9E%E6%B3%95%0Amysqli_query(%24link%2C%20%24sql)%20or%20die(%22%E9%8C%AF%E8%AA%A4%E8%A8%8A%E6%81%AF%EF%BC%9A%22.mysqli_error(%24link))%3B%2F%2F%E5%9F%B7%E8%A1%8C%E6%8F%92%E5%85%A5%0Aecho%20%22%E8%B3%87%E6%96%99%E6%8F%92%E5%85%A5%E6%88%90%E5%8A%9F%EF%BC%81%22%3B%2F%2F%E9%A1%AF%E7%A4%BA%E8%A8%8A%E6%81%AF%0A%3F%3E%0A%2F%2F%E9%80%99%E6%AE%B5%E7%A8%8B%E5%BC%8F%E6%B2%92%E6%9C%89%E5%81%9A%E4%BB%BB%E4%BD%95%E8%99%95%E7%90%86%EF%BC%8C%E5%BB%BA%E8%AD%B0%E5%AF%A6%E9%9A%9B%E4%BD%BF%E7%94%A8%E6%99%82%E5%B0%8D%E8%AE%8A%E6%95%B8%E4%BD%9Cif%E5%88%A4%E6%96%B7%E4%BE%86%E6%B1%BA%E5%AE%9A%E6%88%90%E5%8A%9F%E8%88%87%E5%A4%B1%E6%95%97%E7%9A%84%E5%9B%9E%E5%82%B3%E8%A8%8A%E6%81%AF” message=”res.php” highlight=”” provider=”manual”/]

但因為這樣會將整頁html都傳出去，而這些資料大部分都是重複沒有必要的，所以後來才開始發展出ajax這種方式，僅把需要的資料丟到後端，不必整頁html都傳。如此一來不僅降低傳輸量，透過jquery的DOM操作，我們還能跳過html的form與input限制，直接把任何我們想傳的值透過抓取DOM元素丟到後端，並且把後端丟回來的東西再透過DOM作更多元的處理。

舉例來說，html碼我們可以用最習慣的div去包裹表單內容：

[pastacode lang=”markup” manual=”%3Cdiv%20id%3D’input’%3E%0A%20%20%20%3Cinput%20type%3D’text’%20id%3D’name’%3E%0A%20%20%20%3Cbutton%20id%3D’submit’%3E%E9%80%81%E5%87%BA%3C%2Fbutton%3E%0A%3C%2Fdiv%3E%0A%3Cdiv%20id%3D’response’%20style%3D’display%3Anone%3B’%3E%0A%3C%2Fdiv%3E” message=”” highlight=”” provider=”manual”/]

然後javascript就變成：

[pastacode lang=”javascript” manual=”%24(document).on(‘click’%2C%20’%23submit’%2C%20function()%7B%2F%2F%E4%BD%BF%E7%94%A8%24(document).on()%E7%9A%84%E5%8E%9F%E5%9B%A0%E6%98%AF%E5%A6%82%E6%9E%9Cid%E7%82%BAsubmit%E7%9A%84%E6%8C%89%E9%88%95%E6%98%AF%E4%B8%80%E9%96%8B%E5%A7%8B%E6%B2%92%E6%9C%89%E8%BC%89%E5%85%A5%E3%80%81%E9%80%8F%E9%81%8Eajax%E4%BA%92%E5%8B%95%E5%BE%8C%E6%89%8D%E7%94%A2%E7%94%9F%E7%9A%84DOM%EF%BC%8C%E9%82%A3%E7%94%A8%24().click%E6%9C%83%E6%8A%93%E4%B8%8D%E5%88%B0%EF%BC%8C%E9%9C%80%E4%BB%A5%24(document).on()%E6%89%8D%E8%A1%8C%0A%20%20%20var%20name%20%3D%20%24(‘%23name’).val()%3B%0A%20%20%20%24.ajax(%7B%0A%20%20%20%20%20%20url%3A’res.php’%2C%0A%20%20%20%20%20%20method%3A’POST’%2C%0A%20%20%20%20%20%20data%3A%7B%0A%20%20%20%20%20%20%20%20%20name%3Aname%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20success%3Afunction(res)%7B%0A%20%20%20%20%20%20%20%20%20%24(‘%23input’).hide()%3B%0A%20%20%20%20%20%20%20%20%20%24(‘%23response’).show().html(res)%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%7D)%0A%7D” message=”” highlight=”” provider=”manual”/]

後端php保持原來的樣子：

[pastacode lang=”php” manual=”%3C%3F%0Arequire_once(‘connect.php’)%3B%2F%2F%E5%BC%95%E5%85%A5%E8%B3%87%E6%96%99%E5%BA%AB%E9%80%A3%E7%B5%90%E8%A8%AD%E5%AE%9A%E6%AA%94%0A%24name%20%3D%20%24_POST%5B’name’%5D%3B%2F%2F%E5%8F%96%E5%BE%97name%E5%80%BC%0A%24sql%20%3D%20%22INSERT%20INTO%20%E8%A1%A8%E6%A0%BC%E5%90%8D%E7%A8%B1%20(%E6%AC%84%E4%BD%8D%E5%90%8D%E7%A8%B1)%20VALUES%20(‘%24name’)%20%22%3B%2F%2F%E6%8F%92%E5%85%A5%E8%A1%A8%E6%A0%BC%E8%AA%9E%E6%B3%95%0Amysqli_query(%24link%2C%20%24sql)%20or%20die(%22%E9%8C%AF%E8%AA%A4%E8%A8%8A%E6%81%AF%EF%BC%9A%22.mysqli_error(%24link))%3B%2F%2F%E5%9F%B7%E8%A1%8C%E6%8F%92%E5%85%A5%0Aecho%20%22%E8%B3%87%E6%96%99%E6%8F%92%E5%85%A5%E6%88%90%E5%8A%9F%EF%BC%81%22%3B%2F%2F%E9%A1%AF%E7%A4%BA%E8%A8%8A%E6%81%AF%0A%3F%3E” message=”res.php” highlight=”” provider=”manual”/]

若ajax傳輸成功，res.php就會吐回

[pastacode lang=”php” manual=”echo%20%22%E8%B3%87%E6%96%99%E6%8F%92%E5%85%A5%E6%88%90%E5%8A%9F%EF%BC%81%22%3B” message=”” highlight=”” provider=”manual”/]

echo的內容會成為success:function(res){}的res，於是我們就能利用這個res變數在現有的DOM上面任意處理啦！以例子來說，就是把id為response的div從隱藏改為顯示，並將res的內容印上去：

[pastacode lang=”javascript” manual=”%24(‘%23response’).show().html(res)%3B” message=”” highlight=”” provider=”manual”/]

如何？用ajax傳值是不是非常簡單？

透過res.php裡面的echo，我們可以決定任何想回傳給前端的callback（例如從資料庫裡撈東西出來作判斷後回吐，許多即時驗證用戶名是否重複的ajax功能即是這種應用），然後前端再於success:function(res){}裡面對回傳的res作處理。只要理解ajax與後端的溝通流程，光是簡單的前後端互動就能創造很多漂亮又即時的網頁效果囉！至於圖片與多個重複欄位的表單要如何以ajax處理，就留給下一篇介紹吧！