大家應(yīng)該都知道，在靜態(tài)頁面提交表單到數(shù)據(jù)庫很簡單就是單純的
form action="test.php" method="post">
/form>
這個(gè)缺點(diǎn)是會(huì)刷新頁面，會(huì)跳轉(zhuǎn)頁面的。
今天給大家?guī)淼募夹g(shù)就是ajax提交表單
優(yōu)點(diǎn)是不刷新頁面，不跳轉(zhuǎn)頁面，靜默提交的。
至于什么是ajax，自己去百度了解。
首先我們得要有一個(gè)表單提交頁面：
index.html
這個(gè)頁面由兩個(gè)部分組成
1、表單控件
2、jQuery+ajax處理腳本
jQuery腳本會(huì)獲取form表單的數(shù)據(jù)，通過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>
div id="form-div">
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>div id="success">/div>/p>
/form>
/div>
/body>
/html>
下面就是表單接收頁面
api.php
該頁面其實(shí)很簡單
就是連接數(shù)據(jù)庫
然后插入數(shù)據(jù)庫
插入數(shù)據(jù)庫的兩個(gè)值為
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);
?>
然后我們需要建立好一個(gè)數(shù)據(jù)庫
數(shù)據(jù)庫名為test，表名為testdata
下面是數(shù)據(jù)庫截圖
到此，本次案例完成。
當(dāng)然上面的代碼只是簡單的實(shí)現(xiàn)了ajax提交form表單
但是還有很多細(xì)節(jié)需要優(yōu)化，例如表單驗(yàn)證，數(shù)據(jù)加密等，可以自己拓展學(xué)習(xí)，完善。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
您可能感興趣的文章:- jquery實(shí)現(xiàn)ajax提交form表單的方法總結(jié)
- jQuery實(shí)現(xiàn)form表單基于ajax無刷新提交方法詳解
- jquery序列化form表單使用ajax提交后處理返回的json數(shù)據(jù)
- jquery的ajax提交form表單的兩種方法小結(jié)(推薦)
- Jquery基于Ajax方法自定義無刷新提交表單Form實(shí)例
- AJAX PHP無刷新form表單提交的簡單實(shí)現(xiàn)(推薦)
- 使用Ajax方法實(shí)現(xiàn)Form表單的提交及注意事項(xiàng)
- Ajax提交Form表單及文件上傳的實(shí)例代碼
- jQuery ajax提交Form表單實(shí)例(附demo源碼)
