一、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表单的更多相关文章

  1. Atitit vue.js 把ajax数据 绑定到form表单

    Atitit vue.js 把ajax数据 绑定到form表单 1.1. 使用场景:主要应用在编辑与提交场合..1 1.2. 绑定数据到form控件,可以使用jquery,不过vue.js更加简单1 ...

  2. js文件上传原理(form表单 ,FormData + XHR2 + FileReader + canvas)

    目录 form表单上传 FormData + XHR2 + FileReader + canvas 无刷新本地预览压缩上传实例 目前实现上传的方式 浏览器小于等于IE9(低版本浏览器)使用下面的方式实 ...

  3. JS的文本框验证以及form表单的提交阻止

    js: 1.只能输入数字 只能输入数字:<input type="text" onkeyup="javascript:ReNumber(this)" /& ...

  4. 向后台提交数据:通过form表单提交数据需刷新网页 但通过Ajax提交数据不用刷新网页可通过原生态Ajax或jqueryAjax。Ajax代码部分

    原生态Ajax提交表单:需要借助XMLHttpRequest对象的open,要收通过post发送请求还要setRequsetHeader,然后把数据发送给后端,代码如下 目录结构 index.py代码 ...

  5. Node.js学习笔记(2)--提交表单

    说明(2017-5-2 11:42:33): 1. index.html <!DOCTYPE html> <html lang="en"> <head ...

  6. js实现a标签超链接提交form表单的方法

    <a class="regButton"    id="saveRegister" onclick="document.getElementBy ...

  7. fsLayuiPlugin数据表格弹出form表单说明

    fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...

  8. python中前后端通信方法Ajax和ORM映射(form表单提交)

    后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show(): # 获取数据库所有文章数据,得到一个个对象 res ...

  9. 前端HTML基础之form表单

    目录 一:form表单 1.form表单功能 2.表单元素 二:form表单搭建(注册页面) 1.编写input会出现黄色阴影问题 三:完整版,前端代码(注册页面) 四:type属性介绍 1.inpu ...

随机推荐

  1. Windows安装zookeeper 单机版

    首先需要安装JdK,从Oracle的Java网站下载,安装很简单,就不再详述. 1.下载zookeeper, https://mirrors.tuna.tsinghua.edu.cn/apache/z ...

  2. pycharm安装配置

    激活 教程https://blog.csdn.net/u014044812/article/details/78727496 推荐修改host文件的方法 配置 https://blog.csdn.ne ...

  3. introduce explaining variable 引入解释变量

    一段复杂的计算的表达式(一般 逻辑判断  if(a!=1 && b!=Null && a>b  ) && .... 直接在代码中参与到 代码的逻辑 ...

  4. 手撸代码实现equals方法

    重点都在注释里面写了,这里就不再重复叙述,贴上代码到博客主要是备用. package equals; class Book extends Object { private String title; ...

  5. 关于ip通信学习感想

    在没有接触过ip通信之前,我对于网络的认识非常浅薄,比如上网只需要交钱和一根网线就可以上网,但自从上了第一节课之后,感觉打开了新世界的大门.我国的移动通信公司也没有权利单独分配独有的ip地址,还要看亚 ...

  6. 【图论】最短路问题之spfa

    写在算法前面: 前向星存图(一个神奇的超越邻接矩阵的存在) 首先讲一下需要定义的一些东西?? 1.head数组:head[点数]:head[i]表示以当前点i为起点的最后一条边(这里的最后指的是编号[ ...

  7. linux 每天一点点 【ubuntu16.04 】

    1.查看防火墙状态  sudo ufw status [非root用户需要sudo] inactive状态是防火墙关闭状态 active是开启状态 2.查看CentOS版本信息    cat /etc ...

  8. IntelliJ IDEA 2017.3.1安装步骤

    https://www.jetbrains.com/idea/download/#section=windows 下载旗舰版 1.下载完成后,运行安装: 2.next: 3.选择你要安装的目录,nex ...

  9. Markdown的基本语法记录

    1.标题 示例代码: # 标题1 ## 标题2 ### 标题3 #### 标题4 ##### ... 效果: 标题1 标题2 标题3 标题4 ... 注:# 后面应保持空格 2. 分级标题 示例代码: ...

  10. springboot返回页面

    1.使用@Controller注解: @Controller必须配合模板 先导入依赖: <dependency> <groupId>org.springframework.bo ...