ajax提交form表单到数据库(无刷新)
在静态页面提交表单到数据库很简单就是单纯的 这个缺点是会刷新页面,会跳转页面的。 优点是不刷新页面,不跳转页面,静默提交的。 首先我们得要有一个表单提交页面: index.html <!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> 下面就是表单接收页面 <?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); ?> 然后我们需要建立好一个数据库 下面是数据库截图
到此,本次案例完成。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |