利用ajax提交form表單到資料庫詳解(無刷新)
May 21, 2018 pm 04:17 PM
ajax
form
表單
這篇文章主要為大家介紹了關於利用ajax提交form表單到資料庫(無刷新)的相關資料,文中透過範例程式碼介紹的非常詳細,對大家的學習或工作具有一定的參考學習價值,感興趣的朋友可以來看看。
大家應該都知道,在靜態頁面提交表單到資料庫很簡單就是單純的
<form action="test.php" method="post"> </form>
登入後複製
這個缺點是會刷新頁面,會跳轉頁面的。
今天帶給大家的技術就是ajax提交表單
優點是不刷新頁面,不跳頁,靜默提交的。
至於什麼是ajax,自己去百度了解。
首先我們得要有表單提交頁面:
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表單到資料庫詳解(無刷新)的詳細內容。更多資訊請關注PHP中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保護它?
3 週前
By DDD

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保護它?
3 週前
By DDD

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)