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

网络编程 2024/12/26 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

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

<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提交form表单验证,php,ajax提交form表单

标签：

ajax提交form表单,ajax提交form表单验证,php,ajax提交form表单

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

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

暂无利用ajax提交form表单到数据库详解(无刷新)的评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年12月26日

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

ajax提交form表单,ajax提交form表单验证,php,ajax提交form表单

基于Ajax和forms组件实现注册功能的实例代码

原生ajax写的上拉加载实例

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

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接