Node.js获取前端ajax提交的request信息


Posted in Javascript onFebruary 20, 2017

今天看一下Node.js怎么获取ajax提交的request 信息

众所周知,ajax可以在不刷新整个页面的情况下实现局部刷新,这是相当好的一种方式,能够让我们动态更新信息,今天我们看一下怎么用node来接收到前端ajax提交过来的信息

下面我贴一下前端的代码
index.html的代码我就不贴了, 因为里面就只有一个按钮而已,要实现的功能是点击按钮提交ajax异步请求

主要贴一下js页面的代码

$("button").on("click",function(){
  //提交ajax请求
  $.ajax({
    url:"http://localhost:9999",
    data:{name:'xiaoming',age:19},
    type:"POST",
    dataType:"json",
    async:true,
    timeout:5000,
    complete:function(){
      console.log("end");
    },
    success:function(data,textStatus,jqXHR){
      console.log(data);
      console.log(textStatus);
      console.log(jqXHR);
    },
    error:function(textStatus,jqXHR){
      console.log("error");
      console.log(textStatus);
      console.log(jqXHR);
    }
  });
});

这样我们就已经异步提交了一个ajax请求给服务端。

由于我的服务端是用node写的,我贴一下node.js的代码

/**
 * New node file
 */

//载入模块
var http = require("http");
function onRequest(req,resp){
  //获取ajax提交的信息
  req.on("data",function(data){
    //打印
    console.log(decodeURIComponent(data));
  });
  //返回response
  resp.writeHead(200,{"ContentType":"text/html;charset=utf-8"});
  //返回响应尾
  resp.end();
}

//创建服务器
http.createServer(onRequest).listen(9999);

服务器获取的结果如下:

name=xiaoming&age=19

乍一看,其实获取ajax的请求信息是非常简单,我在node里创建了服务器,然后给request添加data事件,做了一个回调处理,然后就可以获取到ajax提交过来的数据了

但是这样的话,我们还是不能灵活的使用这个数据,我们必须用split将其name和age的value分割出来,这是相当不方便的。

于是我们想到了用querystring来解析为json对象,我们只需要稍稍修改一下刚刚的代码就可以实现

/**
 * New node file
 */

//载入模块
var http = require("http");
var qs = require("querystring");
function onRequest(req,resp){
  //获取ajax提交的信息
  var currentData = "";
  req.on("data",function(data){
    //打印
    currentData += data;
    console.log(qs.parse(currentData));
  });
  //返回response
  resp.writeHead(200,{"ContentType":"text/html;charset=utf-8"});
  //返回响应尾
  resp.end();
}

//创建服务器
http.createServer(onRequest).listen(9999);

下面是运行的结果

{ name: 'xiaoming', age: '19' }

我们也可以将它装到一个变量里,然后使用它的各种属性

var temp = qs.parse(data);
console.log(temp.name);
console.log(temp.age);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
javascript事件函数中获得事件源的两种不错方法
Mar 17 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
canvas学习之API整理笔记(二)
Dec 29 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
Apr 07 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
js实现3D旋转相册
Aug 02 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 Javascript
测量JavaScript函数的性能各种方式对比
Apr 27 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 #Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 #Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 #Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 #Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 #Javascript
ES6中Math对象的部分扩展
Feb 20 #Javascript
微信小程序左滑删除效果的实现代码
Feb 20 #Javascript
You might like
PHP获取服务器端信息的方法
2014/11/28 PHP
ThinkPHP安装和设置
2015/07/27 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
在漏洞利用Python代码真的很爽
2007/08/26 Python
Python中处理时间的几种方法小结
2015/04/09 Python
Python isinstance函数介绍
2015/04/14 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
基于Django统计博客文章阅读量
2019/10/29 Python
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
任意存:BOXFUL
2018/05/21 全球购物
计算机专业自我鉴定
2013/10/15 职场文书
商业房地产广告语
2014/03/13 职场文书
机关搬迁方案
2014/05/18 职场文书
李开复演讲稿
2014/05/24 职场文书
公司经营目标责任书
2015/01/29 职场文书
教师党员自我评价范文
2015/03/04 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
客户答谢会致辞
2015/07/30 职场文书
大队委员竞选稿
2015/11/20 职场文书
党性修养心得体会2016
2016/01/21 职场文书
幼儿体育课教学反思
2016/02/16 职场文书
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL
Python序列化与反序列化相关知识总结
2021/06/08 Python
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis