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判斷來決定成功與失敗的回傳訊息
res.php

但因為這樣會將整頁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 "資料插入成功!";//顯示訊息
?>
res.php

若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處理,就留給下一篇介紹吧!

Add a Comment

你的電子郵件位址並不會被公開。 必要欄位標記為 *