利用ajax提交form表單到數(shù)據(jù)庫詳解(無刷新)
大家應該都知道，在靜態(tài)頁面提交表單到數(shù)據(jù)庫很簡單就是單純的
<form action="test.php" method="post"> </form>
這個缺點是會刷新頁面，會跳轉(zhuǎn)頁面的。
今天給大家?guī)淼募夹g就是ajax提交表單
優(yōu)點是不刷新頁面，不跳轉(zhuǎn)頁面，靜默提交的。
至于什么是ajax，自己去百度了解。
首先我們得要有一個表單提交頁面：
index.html
這個頁面由兩個部分組成
1、表單控件
2、jQuery+ajax處理腳本
jQuery腳本會獲取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ù)據(jù)庫
然后插入數(shù)據(jù)庫
插入數(shù)據(jù)庫的兩個值為
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);
?>
然后我們需要建立好一個數(shù)據(jù)庫
數(shù)據(jù)庫名為test，表名為testdata
下面是數(shù)據(jù)庫截圖
到此，本次案例完成。
當然上面的代碼只是簡單的實現(xiàn)了ajax提交form表單
但是還有很多細節(jié)需要優(yōu)化，例如表單驗證，數(shù)據(jù)加密等，可以自己拓展學習，完善。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
這篇文章主要為大家詳細介紹了Ajax+PHP簡單數(shù)據(jù)交互,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章為大家推薦了一個非常簡單的Ajax請求實例，可以在不重載頁面的情況與 Web 服務器交換數(shù)據(jù)，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了深入淺析Jsonp解決ajax跨域問題的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-05-05
Ajax獲取php返回json數(shù)據(jù)動態(tài)生成select下拉框的實例
今天小編就為大家分享一篇Ajax獲取php返回json數(shù)據(jù)動態(tài)生成select下拉框的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
AJAXRequest v0.2...2006-12-12
這篇文章主要介紹了Ajax實現(xiàn)無刷新分頁實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
Ajax實現(xiàn)動態(tài)加載數(shù)據(jù)
這篇文章主要為大家詳細介紹了Ajax動態(tài)加載數(shù)據(jù)的小例子，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
滑輪滾動到頁面底部ajax加載數(shù)據(jù)配合jsonp實現(xiàn)探討
滾動下拉到頁面底部加載數(shù)據(jù)是很多瀑布流網(wǎng)站的做法，那來看看配合jsonp是如何實現(xiàn)的吧，小菜總結(jié)記錄之用特在此與大家一起分享，感興趣的朋友可以參考下哈2013-05-05
在項目開發(fā)過程中，我們經(jīng)常會遇到同一個域名下不同項目之間通過Ajax相互調(diào)用數(shù)據(jù)，這樣問題就來了，如何通過Ajax實現(xiàn)跨域呢？下面腳本之家小編給大家?guī)砹薃jax實現(xiàn)跨域訪問最新解決方案，感興趣的朋友一起看看吧2018-07-07
Ajax與mysql數(shù)據(jù)交互制作留言板功能（全）
這篇文章主要為大家詳細介紹了Ajax與mysql數(shù)據(jù)交互，實現(xiàn)留言板功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02