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 ...
随机推荐
- Windows安装zookeeper 单机版
首先需要安装JdK,从Oracle的Java网站下载,安装很简单,就不再详述. 1.下载zookeeper, https://mirrors.tuna.tsinghua.edu.cn/apache/z ...
- pycharm安装配置
激活 教程https://blog.csdn.net/u014044812/article/details/78727496 推荐修改host文件的方法 配置 https://blog.csdn.ne ...
- introduce explaining variable 引入解释变量
一段复杂的计算的表达式(一般 逻辑判断 if(a!=1 && b!=Null && a>b ) && .... 直接在代码中参与到 代码的逻辑 ...
- 手撸代码实现equals方法
重点都在注释里面写了,这里就不再重复叙述,贴上代码到博客主要是备用. package equals; class Book extends Object { private String title; ...
- 关于ip通信学习感想
在没有接触过ip通信之前,我对于网络的认识非常浅薄,比如上网只需要交钱和一根网线就可以上网,但自从上了第一节课之后,感觉打开了新世界的大门.我国的移动通信公司也没有权利单独分配独有的ip地址,还要看亚 ...
- 【图论】最短路问题之spfa
写在算法前面: 前向星存图(一个神奇的超越邻接矩阵的存在) 首先讲一下需要定义的一些东西?? 1.head数组:head[点数]:head[i]表示以当前点i为起点的最后一条边(这里的最后指的是编号[ ...
- linux 每天一点点 【ubuntu16.04 】
1.查看防火墙状态 sudo ufw status [非root用户需要sudo] inactive状态是防火墙关闭状态 active是开启状态 2.查看CentOS版本信息 cat /etc ...
- IntelliJ IDEA 2017.3.1安装步骤
https://www.jetbrains.com/idea/download/#section=windows 下载旗舰版 1.下载完成后,运行安装: 2.next: 3.选择你要安装的目录,nex ...
- Markdown的基本语法记录
1.标题 示例代码: # 标题1 ## 标题2 ### 标题3 #### 标题4 ##### ... 效果: 标题1 标题2 标题3 标题4 ... 注:# 后面应保持空格 2. 分级标题 示例代码: ...
- springboot返回页面
1.使用@Controller注解: @Controller必须配合模板 先导入依赖: <dependency> <groupId>org.springframework.bo ...