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 相关文章推荐
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
详解webpack异步加载业务模块
Jun 23 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
微信小程序开发实现的IP地址查询功能示例
Mar 28 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
javascript实现前端分页效果
Jun 24 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
PHP 魔术函数使用说明
2010/05/14 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
javascript预加载图片、css、js的方法示例介绍
2013/10/14 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
python删除某个字符
2018/03/19 Python
python主线程捕获子线程的方法
2018/06/17 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
Python文件读写常见用法总结
2019/02/22 Python
Django实现跨域请求过程详解
2019/07/25 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
Python requests设置代理的方法步骤
2020/02/23 Python
基于python实现查询ip地址来源
2020/06/02 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
Django xadmin安装及使用详解
2020/10/26 Python
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
酒店总经理欢迎词
2014/01/08 职场文书
聚美优品的广告词
2014/03/14 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
爱我中华演讲稿
2014/05/20 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android