Node.js和html数据交互(一) form表单
一、form表单提交数据
数据流向:前端 - > 后端
1、get方法 (action是提交路径,method是提交方法,get方法可以不写)
前端:
<form action="/getuserinfo" method="get">
id:<br>
<input type="text" name="id"><br>
名字:<br>
<input type="text" name="name">
<input type="submit" value="提交">
<br>
</form>
后端:
下面为了方便使用的都是express框架,用http server里面的解析稍微有些不一样,比如需要用url模块来解析req.url,express框架的安装可以参考另一篇文章:https://blog.csdn.net/chen_soldier/article/details/87855187
router.get('/getuserinfo', function(req, res, next) {
var query = req.query;
var id = query.id;
var name = query.name;
console.log(id);
console.log(name);
res.end();
});
注:末尾要加上res.end()或其他返回的html等,不然网页会一直等待
2、post方法
前端:
<form action="/login" method="POST">
name:<br>
<input type="text" name="name"><br>
password:<br>
<input type="text" name="password">
<input type="submit" value="提交">
<br>
</form>
后端:
router.post('/login', function(req, res, next) {
var body = req.body;
var name = body.name;
var password = body.password;
console.log(name);
console.log(password);
res.end();
});
注:用http server需要用querystring模块来解析req.rawBody
form表单提交后会进行页面跳转,如果不希望跳转,可以在页面中定义一个不可见的iframe:
<iframe id="iframe_display" name="iframe_display" style="display: none;"></iframe>
然后将form的target指向该iframe:
<form action="/login" method="POST" target="iframe_display">
此处参考:https://www.cnblogs.com/lydiawork/p/8568954.html
Node.js和html数据交互(一) form表单的更多相关文章
- Atitit vue.js 把ajax数据 绑定到form表单
Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...
- js文件上传原理(form表单 ,FormData + XHR2 + FileReader + canvas)
目录 form表单上传 FormData + XHR2 + FileReader + canvas 无刷新本地预览压缩上传实例 目前实现上传的方式 浏览器小于等于IE9(低版本浏览器)使用下面的方式实 ...
- JS的文本框验证以及form表单的提交阻止
js: 1.只能输入数字 只能输入数字:<input type="text" onkeyup="javascript:ReNumber(this)" /& ...
- 向后台提交数据:通过form表单提交数据需刷新网页 但通过Ajax提交数据不用刷新网页可通过原生态Ajax或jqueryAjax。Ajax代码部分
原生态Ajax提交表单:需要借助XMLHttpRequest对象的open,要收通过post发送请求还要setRequsetHeader,然后把数据发送给后端,代码如下 目录结构 index.py代码 ...
- Node.js学习笔记(2)--提交表单
说明(2017-5-2 11:42:33): 1. index.html <!DOCTYPE html> <html lang="en"> <head ...
- js实现a标签超链接提交form表单的方法
<a class="regButton" id="saveRegister" onclick="document.getElementBy ...
- fsLayuiPlugin数据表格弹出form表单说明
fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...
- python中前后端通信方法Ajax和ORM映射(form表单提交)
后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show(): # 获取数据库所有文章数据,得到一个个对象 res ...
- 前端HTML基础之form表单
目录 一:form表单 1.form表单功能 2.表单元素 二:form表单搭建(注册页面) 1.编写input会出现黄色阴影问题 三:完整版,前端代码(注册页面) 四:type属性介绍 1.inpu ...
随机推荐
- 计算Java对象内存大小
摘要 本文以如何计算Java对象占用内存大小为切入点,在讨论计算Java对象占用堆内存大小的方法的基础上,详细讨论了Java对象头格式并结合JDK源码对对象头中的协议字段做了介绍,涉及内存模型.锁原理 ...
- Windows7下Jupyter Notebook使用入门
目录 一.Jupyter简介 二.Jupyter安装 2.1 python 3安装 2.2 Jupyter 安装 三.Jupyter使用示例 四.Jupyter常用命令 五.其他说明 一.Jupyte ...
- reactiveCocoa使用注意点
@RACSubject信号 注意点:1如果一个页面需要多次发送这个消息,那么似乎会暴露一个bug,信号不会被销毁,等到发送第二个信号 时,第一个信号仍然会被发送,导致错误,比如一个tableView的 ...
- 基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...
- windows系统下安装rabbitmq教程
1.简介 安装rabbitmq需要下载软件Erlang语言开发包和RabbitMQ文件包.文件最新下载地址如下: Erlang: https://www.erlang.org/ RabbitMQ: h ...
- leetcode 703数据流中的第K大元素
这里思路是堆排序,而且是小根堆.C++中包含在头文件<queue>的priority_queue本质就是堆排序实现的.其中priority_queue函数原型是 priority_queu ...
- 通信技术以及5G和AI保障电网安全与网络安全
摘 要:电网安全是电力的基础,随着智能电网的快速发展,越来越多的ICT信息通信技术被应用到电力网络.本文分析了历史上一些重大电网安全与网络安全事故,介绍了电网安全与网络安全.通信技术与电网安全的关系以 ...
- Cognos集成至portal平台运行报表时只出“#”
1. 问题描述 报表集成到平台后,运行报表过程中,当多次运行后,页面只显示“#” 2. 问题分析 这是因为浏览器筛选器限制问题 3. 解决方案 在IE浏览器设置中,Internet选项-安全-自定义级 ...
- css--样式表的引入方法
html引用css方法如下1.直接在div中使用css样式(内链)2.html中使用style自带式(嵌入)3.使用@import引用外部CSS文件(外部引入)4.使用 link引用外部CSS文件 推 ...
- 将一幅图像取平均值缩小N倍实现方法
/// <summary> /// 将图像缩小N倍 /// </summary> /// <param name="source">原图数据&l ...