在静态页面提交表单到数据库很简单就是单纯的
<form action="test.php" method="post"> </form>
这个缺点是会刷新页面,会跳转页面的。今天给大家带来的技术就是ajax提交表单,优点是不刷新页面,不跳转页面,静默提交的。
首先我们得要有一个表单提交页面:
index.html
这个页面由两个部分组成
1、表单控件
2、jQuery+ajax处理脚本
jQuery脚本会获取form表单的数据,通过post的方式提交给api.php
b317222a318de8270818dffaffdd385c 100db36a723c770d327fc0aef2ce13b1 93f0f5c25f18dab9d176bd4f6de5d30e b2386ffb911b14667cb8f0f91ea547a7login test6e916e0f7d1e588d4f442bf645aedb2f a71ddd814d1e6bfc91cd420de31796d5 997f162832870813a4bba3cd209ffad62cacc6d41bbb37262a98f745aa00fbf0 8019067d09615e43c7904885b5246f0a 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="失败!"; } }); } 2cacc6d41bbb37262a98f745aa00fbf0 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d e1d846a265bf300ddc7f4a80b95329f3 d141580f4a41fe1ee835e89737c04401 e388a4556c0f65e1904146cc1a846bee0581997439755c399a6c92b9221be45d94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee15bdbefafd8a17e62bcaf970c51328ab94b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee2cdb61f75629cb4e00b15553abed93b194b3e26ee717c64999d7867364b1b4a3 e388a4556c0f65e1904146cc1a846bee77361903f13dcd26502e2c12536599cd94b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a3 f5a47148e367a6035fd7a2faa965022e 94b3e26ee717c64999d7867364b1b4a3 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e
下面就是表单接收页面
api.php
该页面其实很简单
就是连接数据库
然后插入数据库
插入数据库的两个值为
title和url
17154344e9e2a6fb548e020bf5ec4cb0
然后我们需要建立好一个数据库
数据库名为test,表名为testdata
下面是数据库截图
到此,本次案例完成。
当然上面的代码只是简单的实现了ajax提交form表单
但是还有很多细节需要优化,例如表单验证,数据加密等,可以自己拓展学习,完善。
相关推荐:
以上是ajax提交form表单到数据库实例的详细内容。更多信息请关注PHP中文网其他相关文章!