靜态頁面送出表單到資料庫很簡單就是單純的
<form action="test.php" method="post">
</form>
這個缺點是會重新整理頁面，會跳轉頁面的。今天給大家帶來的技術就是Ajax送出form表單到寫入資料庫執行個體，優點是不重新整理頁面，不跳轉頁面，靜默送出到資料庫的。
首先我們得要有一個表單送出頁面：
index.html
這個頁面由兩個部分組成
1、表單控件
2、jQuery+ajax處理腳本
jQuery腳本會擷取form表單的資料，通過post的方式送出給api.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>login test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function insert() {
$.ajax({
type: "POST",//方法
url: "api.php" ,//表單接收url
data: $('#form1').serialize(),
success: function () {
//送出成功的提示詞或者其他回報代碼
var result=document.getElementById("success");
result.innerHTML="成功!";
},
error : function() {
//送出失敗的提示詞或者其他回報代碼
var result=document.getElementById("success");
result.innerHTML="失敗!";
}
});
}
</script>
</head>
<body>
<p id="form-p">
<form id="form1" onsubmit="return false" action="##" method="post">
<p><input name="title" id="title" type="text" value="title"/></p>
<p><input name="url" id="url" type="text" value="url"/></p>
<p><input type="button" value="插入" onclick="insert()"></p>
<p><p id="success"></p></p>
</form>
</p>
</body>
</html>
下面就是表單接收頁面
api.php
該頁面其實很簡單
就是連接配接資料庫
然後插入資料庫
插入資料庫的兩個值為
title和url
<?php
$title = $_POST['title'];
$url = $_POST['url'];
$con = mysql_connect("localhost","root","root");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("test", $con);
mysql_query("INSERT INTO testdata (title, url)
VALUES ('$title', '$url')");
mysql_close($con);
?>
然後我們需要建立好一個資料庫，參考：必學智庫
資料庫名為test，表名為testdata
下面是資料庫截圖
Ajax送出form表單到寫入資料庫執行個體
到此，本次案例完成。
當然上面的代碼隻是簡單的實作了ajax送出form表單
但是還有很多細節需要優化，例如表單驗證，資料加密等，可以自己拓展學習，完善。部分參考資料來自：軟盟網
![【ajax 送出表單】多種方式的注意事項 ,serialize()的使用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)