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 相关文章推荐
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
JavaScript 变量、作用域及内存
Apr 08 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
jQuery中复合选择器简单用法示例
Mar 31 jQuery
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 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/08/23 PHP
PHP写日志的实现方法
2014/11/05 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
python 二维数组90度旋转的方法
2019/01/28 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
平面设计师的工作职责
2013/11/21 职场文书
四年的个人工作自我评价
2013/12/10 职场文书
腾讯广告词
2014/03/19 职场文书
学校安全责任书
2014/04/14 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
php中pcntl_fork详解
2021/04/01 PHP