菜单

运用ajax提交form表单到数据库详解(无刷新)

2019年5月17日 - Bootstrap

世家应该都了然,在静态页面提交表单到数据库很简单正是单独的

接纳ajax提交form表单到数据库详解(无刷新),ajaxform

世家应该都清楚,在静态页面提交表单到数据库很简单正是单独的

<form action="test.php" method="post">
</form>

以此毛病是会刷新页面,会跳转页面的。

今日给我们带来的手艺就是ajax提交表单

亮点是不刷新页面,不跳转页面,静默提交的。

至于怎么是ajax,本人去百度询问。

先是我们得要有一个表单提交页面:

index.html

那些页面由多个部分组成

一、表单控件

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>
<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

该页面其实很简短

纵使连接数据库

接下来插入数据库

安插数据库的四个值为

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

上面是数据库截图

图片 1

到此,本次案例完毕。

自然上面包车型地铁代码只是轻便的落到实处了ajax提交form表单

然则还有不少细节须求优化,举例表单验证,数据加密等,能够自个儿开始展览学习,完善。

总结

上述正是那篇著作的全体内容了,希望本文的剧情对大家的上学只怕干活富有自然的参阅学习价值,假使有疑问大家能够留言交换,感谢我们对帮客之家的支撑。

http://www.bkjia.com/AJaxjc/1308481.htmlwww.bkjia.comtruehttp://www.bkjia.com/AJaxjc/1308481.htmlTechArticle利用ajax提交form表单到数据库详解(无刷新),ajaxform
大家应该都晓得,在静态页面提交表单到数据库比相当粗略正是单独的 form
action=”test.php” me…

<form action="test.php" method="post">
</form>

以此毛病是会刷新页面,会跳转页面包车型大巴。

先天给我们带来的技能正是ajax提交表单

优点是不刷新页面,不跳转页面,静默提交的。

至于怎样是ajax,自身去百度理解。

先是大家得要有2个表单提交页面:

index.html

那些页面由七个部分组成

一、表单控件

二、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>
<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

该页面其实非常粗略

就算连接数据库

接下来插入数据库

布置数据库的多个值为

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);
?>

接下来我们需求构建好1个数据库

数据库名称叫test,表名字为testdata

下边是数据库截图

图片 2

到此,这次案例实现。

本来上边的代码只是简短的落到实处了ajax提交form表单

然则还有为数不少细节须要优化,比如表单验证,数据加密等,可以和煦进行学习,完善。

总结

如上正是那篇小说的全体内容了,希望本文的源委对我们的上学也许办事有所自然的参谋学习价值,假若有疑点大家能够留言沟通,感激我们对台本之家的支撑。

你只怕感兴趣的稿子:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图