网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

大家应该都知道,在静态页面提交表单到数据库很简单就是单纯的

<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="/UploadFiles/2021-04-02/jquery.min.js">

下面就是表单接收页面

api.php

该页面其实很简单

就是连接数据库

然后插入数据库

插入数据库的两个值为

title和url

<"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);
"text-align: center">利用ajax提交form表单到数据库详解(无刷新)

到此,本次案例完成。

当然上面的代码只是简单的实现了ajax提交form表单

但是还有很多细节需要优化,例如表单验证,数据加密等,可以自己拓展学习,完善。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。

上一篇:基于Ajax和forms组件实现注册功能的实例代码
下一篇:原生ajax写的上拉加载实例
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。