基于Express框架使用POST传递Form数据


Posted in Javascript onAugust 10, 2019

本文实例为大家分享了基于Express框架使用POST传递Form数据的具体代码,供大家参考,具体内容如下

客户端使用Form发送数据

在客户端Html文件中Form代码如下:

<!-- POST test -->
<form action="/test" method="post" id="foo" >
 <input type="text" name="username">
 <input type="password" name="password">
 <input type="submit">
</form>

在服务器端处理'/test' POST请求的代码如下: 

var bodyParser = require('body-parser');
 
// ... 
 
// create application/json parser
var jsonParser = bodyParser.json()
 
// create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false })
 
// ... 
 
// 
// request from form of the html file
// 
app.post('/test', urlencodedParser, function(req, res) { 
 if (!req.body) return res.sendStatus(400);
 
 console.log('Username: ' + req.body.username);
 console.log('Password: ' + req.body.password);
 
 res.send('Welcome, ' + req.body.username); 
});

客户端使用Node.js发送数据

在客户端使用Node.js发送Form数据的代码

const http = require('http');
 
var data = { 
 username: 'foo', 
 password: "test" 
}; 
 
var postData = require('querystring').stringify(data); 
console.log( postData ); 
 
function form()
{
 var options = { 
 method: "POST", 
 host: "localhost", 
 port: 80, 
 path: "/test", 
 headers: { 
  "Content-Type": 'application/x-www-form-urlencoded', 
  "Content-Length": postData.length 
 } 
 }; 
 
 var body = ''; 
 var request = http.request( options, function(res) { 
 // show results 
 console.log('STATUS: ' + res.statusCode); 
 res.setEncoding('utf8'); 
 res.on('data', function(chunk) { 
  body += chunk;
  console.log('BODY: ' + chunk); 
 }); 
 
 res.on('end', function(err) { 
  console.log( ' complete.'); 
 }); 
 }); 
 request.on("error", function(e) { 
  console.log('upload Error: ' + e.message); 
 }) 
 
 request.write( postData );
 request.end(); 
}
 
form();

客户端使用jQuery发送数据

客户端使用jQuery的 $.ajax post数据,

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Post Data</title>
 <script src="jquery.min.js" type="text/javascript"></script>
 <script src="client.js" type="text/javascript"></script>
</head>
<body>
 
<!-- POST test -->
<form action='/update' method='post' id='foo' > Parameters
<table border="0">
 <tr>
 <td> File Name</td>
 <td> <input type="text" name="filename" value = "foo.txt" /></td>
 </tr>
</table> 
</form>
<button name="button1" id='startButton' > Update</button>
 
</body>
</html>

client.js 

$(document).ready(function(){ 
 
 //try joining the server when the user clicks the connect button
 $("#startButton").click(function () {
 var filename = $("#input[name=filename]").val();
 
 $.ajax({
 type: 'POST',
 url: "/update",
 // dataType: "jsonp",
 data: { "filename": filename} , 
 jsonpCallback: 'callback', 
 success: function (data) {
  // ...
 },
 error: function (xhr, status, error) {
  console.log('Error: ' + error.message);
 },
 });
 
 });
});

server端使用node.js解析数据

//
// Modules 
var express = require('express'); 
var bodyParser = require('body-parser'); 
 
//
// Global variables 
var app = express(); 
 
// body parser
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
 
 
/* POST /update listing. */
app.post('/update', function(req, res, next) {
 // Checking require
 if (!req.body) return res.sendStatus(400); 
 
 console.log('filename: ' + req.body.filename); 
 
 res.redirect('./');
});

参考文献:expressjs/body-parser 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
JS DOM 操作实现代码
Aug 01 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
Angular2学习笔记——详解NgModule模块
Dec 02 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
Vue实现点击显示不同图片的效果
Aug 10 #Javascript
vue+eslint+vscode配置教程
Aug 09 #Javascript
一个手写的vue放大镜效果
Aug 09 #Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 #Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 #Javascript
小程序Request的另类用法详解
Aug 09 #Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 #Javascript
You might like
浅析php数据类型转换
2014/01/09 PHP
PHP中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
php实现的xml操作类
2016/01/15 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
php 中的closure用法详解
2017/06/12 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
2010/11/11 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
前台文员岗位职责及工作流程
2013/11/19 职场文书
学校门卫管理制度
2014/01/30 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
Python中的变量与常量
2021/11/11 Python