您好,登錄后才能下訂單哦!
這篇文章主要介紹如何利用ajax提交form表單到數(shù)據(jù)庫,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
大家應該都知道,在靜態(tài)頁面提交表單到數(shù)據(jù)庫很簡單就是單純的
<form action="test.php" method="post"> </form>
這個缺點是會刷新頁面,會跳轉頁面的。
今天給大家?guī)淼募夹g就是ajax提交表單
優(yōu)點是不刷新頁面,不跳轉頁面,靜默提交的。
至于什么是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ù)加密等,可以自己拓展學習,完善。
以上是“如何利用ajax提交form表單到數(shù)據(jù)庫”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經查實,將立刻刪除涉嫌侵權內容。