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 相关文章推荐
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
javascript eval函数深入认识
Feb 21 Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
使用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
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
php根据指定位置和长度获得子字符串的方法
2015/03/17 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
django中的ajax组件教程详解
2018/10/18 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
微信小程序实现锚点跳转
2020/11/23 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
python中解析json格式文件的方法示例
2017/05/03 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
鲁迅故居导游词
2015/02/05 职场文书
家装电话营销开场白
2015/05/29 职场文书