基于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 相关文章推荐
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
jquery常用技巧及常用方法列表集合
Apr 06 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
基于vue 开发中出现警告问题去除方法
Jan 25 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
vue导航栏部分的动态渲染实例
Nov 01 Javascript
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
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
解决GD中文乱码问题
2007/02/14 PHP
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
smarty中js的调用方法示例
2014/10/27 PHP
thinkPHP实现将excel导入到数据库中的方法
2016/04/22 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
javascript 数组的方法集合
2008/06/05 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
IE中图片的onload事件无效问题和解决方法
2014/06/06 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
python处理xml文件的方法小结
2017/05/02 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
python 异步async库的使用说明
2020/05/04 Python
如何对python的字典进行排序
2020/06/19 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
初中生物教学反思
2014/01/10 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
建筑质检员岗位职责
2015/04/08 职场文书