ajax提交form表单到数据库(无刷新)

2i18ns 发布于2019-06-28 18:25 / 2450人阅读

摘要：在静态页面提交表单到数据库很简单就是单纯的这个缺点是会刷新页面，会跳转页面的。当然上面的代码只是简单的实现了提交表单但是还有很多细节需要优化，例如表单验证，数据加密等，可以自己拓展学习，完善。

在静态页面提交表单到数据库很简单就是单纯的

这个缺点是会刷新页面，会跳转页面的。
今天给大家带来的技术就是ajax提交表单

优点是不刷新页面，不跳转页面，静默提交的。
至于什么是ajax，自己去百度了解。

首先我们得要有一个表单提交页面：

index.html
这个页面由两个部分组成
1、表单控件
2、jQuery+ajax处理脚本
jQuery脚本会获取form表单的数据，通过post的方式提交给api.php




    login test

下面就是表单接收页面
api.php
该页面其实很简单
就是连接数据库
然后插入数据库
插入数据库的两个值为
title和url

然后我们需要建立好一个数据库
数据库名为test，表名为testdata

下面是数据库截图

到此，本次案例完成。
当然上面的代码只是简单的实现了ajax提交form表单
但是还有很多细节需要优化，例如表单验证，数据加密等，可以自己拓展学习，完善。
本文由里客云资源站原创：http://www.likeyunba.com
转载请附上原链接，加入技术交流群请加微信:likeyunba520

云服务器 GPU云服务器 ajax提交form表单 js提交form表单数据 js获取form表单提交数据 js提交本form表单的数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/28258.html

ajax提交form表单到数据库(无刷新)

摘要：在静态页面提交表单到数据库很简单就是单纯的这个缺点是会刷新页面，会跳转页面的。当然上面的代码只是简单的实现了提交表单但是还有很多细节需要优化，例如表单验证，数据加密等，可以自己拓展学习，完善。在静态页面提交表单到数据库很简单就是单纯的这个缺点是会刷新页面，会跳转页面的。今天给大家带来的技术就是ajax提交表单优点是不刷新页面，不跳转页面，静默提交的。至于什么是ajax，自己去百度...

荆兆峰 2019-08-26 11:45 评论0 收藏0
web端文件上传功能的思考

摘要：概述文件上传是一个很常见的需求，实现文件上传的技术也很多。帮助文档模拟无刷新的文件上传功能页面无刷新上传文件模拟，超简单为什么上传文件的表单里要加个属性接口对象的介绍使用对象涉及文章侵权，请邮件告知。概述文件上传是一个很常见的需求，实现文件上传的技术也很多。下面就谈谈一些常见的上传技术以及它们的优劣。传统表单上传传统表单文件上传估计是运用最广泛和最简单的技术了，说它简单是...

Jaden 2019-08-21 12:35 评论0 收藏0
PHP_Ajax

摘要：简介业务做一个在线投票，给歌手投票。提交到当前页面的中达到效果。用户名密码注册总结在不使用对象的情况下，依然可以用来实现对后台服务器的请求，同时不带来页面刷新或者跳转。 ajax 简介业务：做一个在线投票，给歌手投票。要求：无刷新，并且不允许使用XMLHttpRequest对象.分析:在XHR对象，没有流行之前，已经有了无刷新这种效果的方法. 从http角度看，可以利用204 No...

MiracleWong 2019-06-27 15:05 评论0 收藏0
【面试篇】JS基础知识查漏补缺

摘要：因为在页面加载完成后，引擎维护着两个队列，一个是按页面顺序加载的执行队列，还有一个空闲队列，使用定时函数就是将回调函数加入到空闲队列中，故和其他定时器是并发执行的。 1.window.onload和$(document).ready()的区别： ①执行时间：window.onload会在所有元素，包括图片,引用文件加载完成之后执行，而$(document).ready()则会在HTML...

myeveryheart 2019-08-20 16:02 评论0 收藏0
yii2 modal弹窗之ActiveForm ajax表单异步验证

摘要：顺便再叨唠一句，确实没啥好说了。后面若是有我再把话改回来。中，默认做了客户端验证，但是表单的提交，却不是无刷新的。也就是常常看到的表单提交后页面会刷新。关于我们做一个说明。作者：白狼出处：http://www.manks.top/yii2_modal_activeform_ajax.html 本文版权归作者，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接...

youkede 2019-06-27 13:55 评论0 收藏0