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 dom 基本操作小结
Apr 11 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
vue 子组件修改data或调用操作
Aug 07 Javascript
AJAX学习笔记
May 18 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获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
js继承的实现代码
2010/08/05 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
python self,cls,decorator的理解
2009/07/13 Python
写了个监控nginx进程的Python脚本
2012/05/10 Python
详解详解Python中writelines()方法的使用
2015/05/25 Python
Python实现分割文件及合并文件的方法
2015/07/10 Python
python自带的http模块详解
2016/11/06 Python
Python统计单词出现的次数
2018/04/04 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
学前教育教师求职自荐信
2013/09/22 职场文书
初中音乐教学反思
2014/01/12 职场文书
网络管理专业求职信
2014/03/15 职场文书
继承权公证书范本
2015/01/23 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL
python 学习GCN图卷积神经网络
2022/05/11 Python