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 css styleFloat和cssFloat
Mar 15 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 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 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
python根据url地址下载小文件的实例
2018/12/18 Python
PyQt5组件读取参数的实例
2019/06/25 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
python判断无向图环是否存在的示例
2019/11/22 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
keras中的History对象用法
2020/06/19 Python
最热门的自我评价
2013/12/30 职场文书
银行柜员与客户起冲突检讨书
2014/09/27 职场文书
刮痧观后感
2015/06/05 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
Nginx配置根据url参数重定向
2022/04/11 Servers
keepalived + nginx 实现高可用方案
2022/12/24 Servers