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的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
页面点击小红心js实现代码
May 26 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
Vue CLI3中使用compass normalize的方法
May 30 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 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的责任链编程模式
2015/08/11 PHP
php加密解密字符串示例
2016/10/13 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
python with提前退出遇到的坑与解决方案
2018/01/05 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
利用python实现逐步回归
2020/02/24 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
企业宣传工作方案
2014/06/02 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js