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实现flash8类似的连接效果
May 03 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
使用js实现数据格式化
Dec 03 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
jQuery中队列queue()函数的实例教程
May 03 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 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集成FCK的函数代码
2008/09/27 PHP
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
基于PHP遍历数组的方法汇总分析
2013/06/08 PHP
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
javascript document.images实例
2008/05/27 Javascript
一些常用的JS功能函数代码
2009/06/23 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
python实现每次处理一个字符的三种方法
2014/10/09 Python
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
python查看微信好友是否删除自己
2016/12/19 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
专业毕业生个性的自我评价
2013/10/03 职场文书
大专计算机个人求职的自我评价
2013/10/21 职场文书
电大本科自我鉴定
2014/02/05 职场文书
软环境建设心得体会
2014/09/09 职场文书
SQL Server实现分页方法介绍
2022/03/16 SQL Server
Nginx动静分离配置实现与说明
2022/04/07 Servers
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL