专栏首页程序员的碎碎念ajax异步提交数据到数据库

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),作者:benny

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • PHP网络爬虫之CURL

    php的curl可以实现模拟http的各种请求,这也是php做网络爬虫的基础,也多用于接口api的调用。 PHP 支持 Daniel Stenberg 创建的 ...

    benny
  • redis不难,benny带你入门

    关于redis的学习,相信在各大博客、公众号上和教学视频教程里有很多,benny学习了一段时间总算是入门了,在会不定期的更新redis学习日记。

    benny
  • 区块链可以减少社会不平等吗?

    本文在腾讯云+社区人工智能专栏首发, 为原创翻译文章. 英语原文以引用方式给出 注释部分为译者为文中的相关概念注释 若手机显示不全, 请滑动屏幕 导读 201...

    benny
  • TensorFlow入门 - 使用TensorFlow甄别图片中的时尚单品

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

    Steve Wang
  • 专访图灵奖得主David Patterson:8年前就得知被提名,AI跃迁看好边缘计算

    2017年图灵奖,最终颁给了John L. Hennessy和David A. Patterson.

    量子位
  • 使用TensorFlow甄别图片中的时尚单品

    Steve Wang
  • JSON 和 JSONP

    浏览器安全模型规定,XMLHttpRequest、框架(frame)等只能在一个域中通信。从安全角度考虑,这个规定很合理;但是,也确实给分布式(面向服务、混搭等...

    张善友
  • 数据中心使用dtu远程连接oracel 9i数据库问题

    数据中心使用dtu远程连接oracel 9i数据库问题 发表人:lurrance | 发表时间: 2005年二月20日, 12:13 经过从网上找来的资料以及看...

    阿新
  • WordPress主题Siren二开美化版

    用 WordPress 来做博客程序完全是因为一款主题呢! 就是,由 蜜汁路易 二次修改发布的 Siren 主题! 它的前身就是由 Fuzzz 制作的 Aki...

    叮当叮
  • 微信手Q node.js直出框架Hawaii剖析——京东前台技术委员会专题

    手机京东技术团队 ? 作者简介 资深前端开发工程师 京东前台技术委员会委员 微信手Q运营产品前端开发组组长 目前负责微信手Q购物入口的前端基础建设及port...

    京东技术

扫码关注云+社区

领取腾讯云代金券