node服务器获取form表单
搭建好服务器后
(前言,本文只是介绍form表单直接提供给 本页面数据,即在不刷新页面的前提下更改数据)
在public里面添加index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<form method="post" action="hello">
<label>
name:
<input type="text" name="name" required="required">
</label>
<input type="submit" value="submit">
</form>
<div id="result"></div>
<script src="main.js"></script>
</body>
</html>
在新建个main.js
(function () { $("form").on("submit", function (e) {
e.preventDefault(); // console.log(this["name"].value, this.action, this.method); $.post(this.action, {name: this["name"].value}).done(function (data) {
$("#result").html(data);
}).fail(function (err) {
alert("无法连接服务器");
});
}); })();
在routes里面的index文件中添加如下代码
router.post("/hello", function (req, res) {
res.render("hello", {name: req.body.name});
});
再在views文件夹下添加hello.jade文件
html
head
title = "hello"
body
div hello #{name};
ok,运行即可
补充一下,send和render的区别
send:直接处理数据,作用:把数据传到<body>标签中,只能传来get,即传过来搜索框中的内容(处理的是直接的数据)
render:意为渲染,作用,把一个文件渲染后,传到<body>标签中,使用post处理过得数据,传送给那个文件,后在传到<body>标签中。(处理的是文件)
node服务器获取form表单的更多相关文章
- serialize可以获取form表单里面的数值
serialize属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- java:JavaScript2:(setTimeout定时器,history.go()前进/后退,navigator.userAgent判断浏览器,location.href,五种方法获取标签属性,setAttribute,innerHTML,三种方法获取form表单信息,JS表单验证,DOM对象,form表单操作)
1.open,setTimeout,setInterval,clearInterval,clearTimeout <!DOCTYPE> <html> <head> ...
- 5 获取Form表单取值
#form表达提交@app.route("/data",methods=['GET','POST']) #methods 让当前路由支持GET 和 POST 方式def data( ...
- jquery获取form表单内容以及绑定数据到form表单
在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使 ...
- JS获取form表单数据
以下代码可放在一个js文件中,以便通用: //获取指定表单中指定标签对象 function getElements(formId, label) { var form = document.getEl ...
- 通过脚本获取form表单的数值而不是submit
jQuery的serialize()方法通过序列化表单值,创建URL编码文本字符串,我们就可以选择一个或多个表单元素,也可以直接选择form将其序列化,如: <form action=" ...
- 3..jquery的ajax获取form表单数据
jq是对dom进行的再次封装.是一个js库,极大简化了js使用 jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.mi ...
- 获取form表单默认提交的返回值
1.经常用form表单提交的小伙伴有没有发现,form表单默认的提交是没有返回值的,而且默认提交成功之后是跳转,跳转的action的路径,下面写一下默认的提交如何获取到form表单的返回值json,并 ...
- html基础:jquery的ajax获取form表单数据
jq是对dom进行的再次封装.是一个js库,极大简化了js使用 jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.mi ...
随机推荐
- vim基本使用
i 进入插入状态 esc 退出插入状态 x 删除一个字符 dd 删除一行,并拷贝 yy 拷贝 p 粘贴 u 撤销 ctrl+r 重做 :w 保存 :q 退出 :q! → 退出不保存
- js修改浏览器url
var stateObject = {};var title = "";var newUrl = "/";history.pushState(stateObje ...
- ECharts开始
为ECharts准备一个具备大小(宽高)的Dom(当然可以是动态生成的) //from echarts example <body> <div id="main" ...
- HDU 5013 City Tour
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5013 题意: 思路: 这里有错,是Hi(x)=sigama(Hji)(j属于x) const int ...
- Java-集合框架整理
一.List 接口集合: 1.优势以及特点:有序,允许重复元素 . 2.实现类: * AarrayList 类:不同步,可变长度数组,倍增率为 1/n ; * LinkedList 类:不同步,链表结 ...
- jQuery函数attr()和prop()的区别,val()
[自己总结,详情见下面转录的文章]: attr()用于操作html属性,prop()属性用于操作DOM属性 ①: 很多情况下可以互用 ②:attr()独自适用的情况,自定义的html属性,html属性 ...
- jquery获取当前时间
一.获取当前时间 new Date()方法---------得到结果是当前电脑时间如2011-11-6,10:07 二.获取有个固定的时间方法---------var endtime=new Date ...
- FJNU 1154 Fat Brother And His Love(胖哥与女神)
FJNU 1154 Fat Brother And His Love(胖哥与女神) Time Limit: 2000MS Memory Limit: 257792K [Description] [ ...
- Redis 在新浪微博中的应用
Redis 在新浪微博中的应用 Redis简介 1. 支持5种数据结构 支持strings, hashes, lists, sets, sorted setsstring是很好的存储方式,用来做计数存 ...
- Python基础学习笔记(九)常用数据类型转换函数
参考资料: 1. <Python基础教程> 2. http://www.runoob.com/python/python-variable-types.html 3. http://www ...