ajax页面数据的传递
在上一篇文章中,简单提到了ajax的工作流程,那么在这里我们就得实战一回了,真正将ajax的用途展现出来,这一整套流程就是在页面上触发一个ajax事件,然后发送请求,紧接着到数据库读取数据,返回值,然后显示在页面上,当然这个是不用刷新整个页面的当然这也就得益于ajax的异步功能了,这里不做过多的简述。
首先第一步,就是触发一个事件,这个事件当然是出现在页面上的,所谓的事件,就是用户在页面上的活动会触发某些事件,比如说点击啊,什么的,然后网页会给出一定的反应,这就是事件的定义,当然在这里,当我们用户点击某个按钮,触发某个事件,当然这个事件上绑定了我们的ajax当被触发以后,就执行我们前一章节简述的ajax工作流程,发送一个ajax请求到我们的服务器,在这里,服务器的搭建有很多的,有大型的,比如说用Java编写的安全性高的,有中小型的,比如说用php语言编写的,当然,我们这里采用node-js搭建的服务器。
当我们的监听端口监听到用户发送来的ajax请求,紧接着就会进行编译,这里我们得定义好sql语句,在这里,node-js服务器就将执行我们编译好的sql语句,以res.send(),发送到数据库,在这一步,便是执行数据库操作,将符合我们查找需要的数据找出来,在返回给我们的ajax,紧接着,ajax的response.text将带回从数据库查出来的返回值,我们通过操作javascript 的DOM属性就可以将返回值随意的放在页面上了。
在这里,不得不提一下node-js对已数据库的连接,我们的node-js是基于谷歌的v8引擎,独立运行的,基于异步非阻塞IO的一种新技术,其中的详细介绍将在后面详述,其中node-js提供了许多的核心包,这些包是通过npm包管理工具进行下载的,下载好以后,我们只需在我们的项目中引入mysql模块包就可以了,建立连接
var conn=mysql.createConnection();
紧接着就要连接我们的数据库核心包了,
var mysql=require("mysql");
var conn=mysql.createConnection({
host:"localhost" ---------->这一步的操作主要是定义是在本机上访问数据库还是远程访问;
port:3306;-------------->数据库的端口号,方便对接。
database:“test”--------->我们需要查询的那个数据库名称
user:“root”---------->我们定义好的数据库的用户名;
password:“123”------>我们定义的数据库的密码;
});
进过这几步的话,我们就基本上完成了node-js和我们mysql 的成功对接,当然我们数据库是存放数据的地方,里面不乏一些重要的数据,就像是我们的房子一样,你出门以后总不会不关门就离开了吧,忘记了的除外,所以当我们在用完数据库之后,重要的一点就是记得关闭数据库。虽然不是什么大事情,但是作为一个程序员我们必须注重细节。
其中在连接中,还有就是node-js的介绍,在这里都不是很详细,接下来我们详细介绍。
ajax页面数据的传递的更多相关文章
- AJAX 页面数据传递
$.ajax({ //一个Ajax过程 type: "post", //以post方式与后台沟通 url: "personstockajax.php", //与 ...
- vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全
https://segmentfault.com/q/1010000005618139 vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全 点击提交,发送请求.但是api ...
- form表单提交数据,页面必定会刷新,ajax提交数据不会刷新,做到悄悄提交,多选删除,ajax提交实例
很多页面用到的模态对话框,如知明网站https://dig.chouti.com/的登录页都是模态对话框, 当点登录时,是用的ajax提交,因为输入错了信息,有返回消息,而页面没有刷新. jquery ...
- vue页面之间数据的传递
vue是由一个个组件组合而成的页面,今天我们就来说一下页面之间数据的传递. 我们经常会在后台管理系统看到用户详情,有添加用户和编辑用户.有时候我们的添加和编辑是在同一页面上以模态框的形式展现的,但有的 ...
- 扩展auth_user字段、BBS需求分析、创建BBS数据库、注册页面搭建与用户头像展示及Ajax提交数据
昨日内容回顾 csrf跨站请求 1. SQL注入 2. xss攻击 3. csrf跨站请求 4. 密码加密(加盐) '''django中默认有一个中间件来验证csrf''' # 只针对post请求才验 ...
- ASP.NET MVC5中View-Controller间数据的传递
使用ASP.NET MVC做开发时,经常需要在页面(View)和控制器(Controller)之间传递数据,那么都有哪些数据传递的方式呢? 本文对于View向Controller中传值共列举了以下几种 ...
- Learning Scrapy笔记(六)- Scrapy处理JSON API和AJAX页面
摘要:介绍了使用Scrapy处理JSON API和AJAX页面的方法 有时候,你会发现你要爬取的页面并不存在HTML源码,譬如,在浏览器打开http://localhost:9312/static/, ...
- 使用服务器端控制AJAX页面缓存
你知道 response.setHeader("Cache-Control","no-cache"); 这条语句是干什么的吗? 这是用来防止浏览器缓存动态内容生 ...
- ajax大数据排队导出+进度条
描述 :我们现在有很多数据,分表存放,现在需要有精度条的导出.最后面有完整源码. 效果图:
随机推荐
- JAVA内置的观察者模式样本
DisplayElement.java public interface DisplayElement { public void display(); } CurrentConditionsDisp ...
- The difference between text mode and binary mode with file streams
FIO14-C. Understand the difference between text mode and binary mode with file streams Skip to e ...
- 【转】Java 集合系列03之 ArrayList详细介绍(源码解析)和使用示例
原文网址:http://www.cnblogs.com/skywang12345/p/3308556.html 上一章,我们学习了Collection的架构.这一章开始,我们对Collection的具 ...
- HDOJ 2802 F(N)
Problem Description Giving the N, can you tell me the answer of F(N)? Input Each test case contains ...
- Nodejs in Visual Studio Code 10.IISNode
1.开始 Nodejs in Visual Studio Code 08.IIS : http://www.cnblogs.com/mengkzhaoyun/p/5410185.html 参考此篇内容 ...
- 微信支付【get_brand_wcpay_request:fail_invalid appid】
微信支付授权目录一定要注意大小写 艹 如下的WXPay2 千万不要写成WxPay2了 参考地址:http://q.cnblogs.com/q/70405/ 微信支付代码下载:http://files. ...
- openStack controller 管理网口TX数据量非常大 网络总是丢包
- “VICUTU威克多”高档男装
"VICUTU威克多"高档男装 北京威克多制衣中心是一家从事高档男装设计.制造和销售为一体的股份服装企业.主要经营品牌为"VICUTU"男装系列,主导产品为 ...
- mongoDb 给表添加+ 删除字段
1 .添加一个字段. url 代表表名 , 添加字段 content. 字符串类型. db.url.update({}, {$set: {content:""}}, {multi ...
- troubleshooting tools in JDK 7--转载
This chapter describes in detail the troubleshooting tools that are available in JDK 7. In addition, ...