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

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

<form action='res.php' method='post'>
   <input name='name' type='text'>
   <input name='submit' type='submit'>
</form>

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

<?
require_once('connect.php');//引入資料庫連結設定檔
$name = $_POST['name'];//取得name值
$sql = "INSERT INTO 表格名稱 (欄位名稱) VALUES ('$name') ";//插入表格語法
mysqli_query($link, $sql) or die("錯誤訊息：".mysqli_error($link));//執行插入
echo "資料插入成功！";//顯示訊息
?>
//這段程式沒有做任何處理，建議實際使用時對變數作if判斷來決定成功與失敗的回傳訊息

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

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

<div id='input'>
   <input type='text' id='name'>
   <button id='submit'>送出</button>
</div>
<div id='response' style='display:none;'>
</div>

然後javascript就變成：

$(document).on('click', '#submit', function(){ 
/*使用$(document).on()的原因是如果id為submit的按鈕是一開始沒有載入、透過ajax互動後才產生的DOM，那用$().click會抓不到，需以$(document).on()才行 */
   var name = $('#name').val();
   $.ajax({
      url:'res.php',
      method:'POST',
      data:{
         name:name
      },
      success:function(res){
         $('#input').hide();
         $('#response').show().html(res);
      }
   })
}

後端php保持原來的樣子：

<?
require_once('connect.php');//引入資料庫連結設定檔
$name = $_POST['name'];//取得name值
$sql = "INSERT INTO 表格名稱 (欄位名稱) VALUES ('$name') ";//插入表格語法
mysqli_query($link, $sql) or die("錯誤訊息：".mysqli_error($link));//執行插入
echo "資料插入成功！";//顯示訊息
?>

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

echo "資料插入成功！";

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

$('#response').show().html(res);

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

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