ajax异步提交数据到数据库

很多时候我们提交数据到服务器端数据库都是用form表单,这样子是最普通最简单提交数据的方法,你填写完表单后,post提交到后台文件.php,处理完后返回到指定页面,最后,页面就重新刷新了一遍,显示预想的页面。当然,这个逻辑操作没一点毛病,但有一点,那就是给用户不好的体验:重新刷新了页面。假如,用户没按要求输错了某个值,然后弹出一个框框告诉你“亲爱的,你刚刚花了半个小时注册的内容得重新输入了!!”,这时候,你肯定的mmp的,所以,咱们今天要推举的ajax异步post提交数据到数据库来解决这个问题。

先理解个概念吧:同步与异步

举个简单的例子:你用form表单,直接post提交数据到数据库,那是同步;你用ajax异步提交post,那是异步操作;就相当于,你有一样东西要给A,你直接放给他,然后他用完直接还给你,这就叫同步,而,你可以通过快递,间接给A东西,他也可以通过快递间接给你,当出现什么问题的时候,你可以告诉快递“我要换地址,我要改电话号码什么的操作”,这可以理解为异步。

那什么是ajax呢?

Ajax 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。

好,说了这么多啦,咱们来看看具体的代码:登录界面(form表单提交的很简单,我就不举对比例子了,不懂的可以百度或者自己操作下)

先引入必要的文件:jquery.js,【layer.js弹出框框架可选用】

定义和用法

post() 方法通过 HTTP POST 请求从服务器载入数据。

语法

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

参数

描述

url

必需。规定把请求发送到哪个 URL。

data

可选。映射或字符串值。规定连同请求发送到服务器的数据。

success(data, textStatus, jqXHR)

可选。请求成功时执行的回调函数。

dataType

可选。规定预期的服务器响应的数据类型。默认执行智能判断(xml、json、script 或 html)。

分析:

1、js获取input中的数据

2、判断数据是否满足要求(这里提一下layer,它是一个很好用很好看的前端弹出框框架,简单易学,可以去官网上看开发文档)

3、请求post的url地址

4、要传递到url地址的相关数据(参数案例:{name:"wzc",sno:"001"})

5、数据处理后返回函数

好,接下来,我们看看ajaxCheckLogin.php文件:

依次四个红框的解释为:

1、session和引入数据库连接文件(这里不扩展了,不会的下方评论,我教你php pdo扩展连接数据库)

2、获取从前端页面post过来的数据

3、mysql数据库操作语句和pdo操作

4、判断mysql操作是否正确,然后返回返回值

最后,你应该就可以学会了!

原文发布于微信公众号 - 程序员的碎碎念(gh_53e607dd4782)

原文发表时间:2017-11-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程

tornado全面剖析与实践系列1

猿助猿的技术栈是基于Tornado的, 在学习的过程中参考了很多文章, 但是内容大都碎片化, 缺少系统性讲解, 而且不少关于异步应用的内容还是基于过时的旧版本....

2639
来自专栏奔跑的蛙牛技术博客

Java虚拟机加载类文件大全-精细版

类加载器存在父子关系 例如系统类加载器要加载java.util.ArrayList,首先要求扩展类进行加载,然后扩展类加载器要求引导类加载器进行加载。

461
来自专栏向治洪

Android热修复技术总结

插件化和热修复技术是Android开发中比较高级的知识点,是中级开发人员通向高级开发中必须掌握的技能,插件化的知识可以查我我之前的介绍:Android插件化。本...

2267
来自专栏java初学

scrapy(1)——scrapy介绍

3277
来自专栏Fundebug

Async/Await替代Promise的6个理由

译者按: Node.js的异步编程方式有效提高了应用性能;然而回调地狱却让人望而生畏,Promise让我们告别回调函数,写出更优雅的异步代码;在实践过程中,却发...

754
来自专栏知晓程序

开发 | 小程序跨页传值的的问题,这个 JS 库就能解决(内附项目地址)

最近微信小程序越来越火,不少公司都在开发微信小程序,将其他平台的代码转为小程序的代码。

632
来自专栏向治洪

Android热修复技术总结

插件化和热修复技术是Android开发中比较高级的知识点,是中级开发人员通向高级开发中必须掌握的技能,插件化的知识可以查我我之前的介绍:Android插件化。本...

2376
来自专栏iKcamp

Vue.js 服务端渲染业务入门实践

作者:威威(沪江前端开发工程师) 本文原创,转载请注明作者及出处。 背景 最近, 产品同学一如往常笑嘻嘻的递来需求文档, 纵使内心万般拒绝, 身体倒是很诚实...

2548
来自专栏木子昭的博客

精析Python3实现动态web服务(附服务端源码)如果我们提供一个动态网站服务,至少应考虑以下四点:一个优秀的动态web框架应该是这样的:关于WSGI标准WIGS模型的要点:实现源码小结:

实现一个简单的静态web网站,只需将写好的html页面上传到特定的web服务器软件即可,但静态网页其实和图片没什么区别,每次更新网站内容,都需要重新制作htm...

35412
来自专栏python3

scrapy入门学习(原理)

网络爬虫又称网页蜘蛛,网络机器人,是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本。如果有兴趣可查看百度百科网络爬虫

722

扫码关注云+社区