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 相关文章推荐
script标签的 charset 属性使用说明
Dec 04 Javascript
jquery中的 $("#jb51")与document.getElementById("jb51") 的区别
Jul 26 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
React key值的作用和使用详解
Aug 23 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 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
珊瑚虫IP库浅析
2007/02/15 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
php简单复制文件的方法
2016/05/09 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
PHP 无限级分类
2017/05/04 PHP
PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】
2017/07/19 PHP
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
Node.js 实现抢票小工具 & 短信通知提醒功能
2019/10/22 Javascript
详解vue 组件注册
2020/11/20 Vue.js
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
Python实现数值积分方式
2019/11/20 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
求职简历中的自我评价分享
2013/12/08 职场文书
社区安全检查制度
2014/02/03 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
管辖权异议上诉状
2015/05/23 职场文书
Python自动化实战之接口请求的实现
2022/05/30 Python