搭建好服务器后

(前言,本文只是介绍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表单的更多相关文章

  1. serialize可以获取form表单里面的数值

    serialize属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. java:JavaScript2:(setTimeout定时器,history.go()前进/后退,navigator.userAgent判断浏览器,location.href,五种方法获取标签属性,setAttribute,innerHTML,三种方法获取form表单信息,JS表单验证,DOM对象,form表单操作)

    1.open,setTimeout,setInterval,clearInterval,clearTimeout <!DOCTYPE> <html> <head> ...

  3. 5 获取Form表单取值

    #form表达提交@app.route("/data",methods=['GET','POST']) #methods 让当前路由支持GET 和 POST 方式def data( ...

  4. jquery获取form表单内容以及绑定数据到form表单

    在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使 ...

  5. JS获取form表单数据

    以下代码可放在一个js文件中,以便通用: //获取指定表单中指定标签对象 function getElements(formId, label) { var form = document.getEl ...

  6. 通过脚本获取form表单的数值而不是submit

    jQuery的serialize()方法通过序列化表单值,创建URL编码文本字符串,我们就可以选择一个或多个表单元素,也可以直接选择form将其序列化,如: <form action=" ...

  7. 3..jquery的ajax获取form表单数据

    jq是对dom进行的再次封装.是一个js库,极大简化了js使用 jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.mi ...

  8. 获取form表单默认提交的返回值

    1.经常用form表单提交的小伙伴有没有发现,form表单默认的提交是没有返回值的,而且默认提交成功之后是跳转,跳转的action的路径,下面写一下默认的提交如何获取到form表单的返回值json,并 ...

  9. html基础:jquery的ajax获取form表单数据

    jq是对dom进行的再次封装.是一个js库,极大简化了js使用 jquery库在js文件中,包含了所有jquery函数,引用:<script src="jquery-1.11.1.mi ...

随机推荐

  1. android source

    h1 { margin-bottom: 0.21cm } h1.western { font-family: "Liberation Sans", sans-serif; font ...

  2. HDU 5030 Rabbit's String

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5030 题意:给出一个长度为n的串S,将S分成最多K个子串S1,S2,……Sk(k<=K).选出每 ...

  3. 网站安全扫描工具--Netsparker的使用

    Netsparker是一款安全简单的web应用安全漏电扫描工具.该软件功能非常强大,使用方便.Netsparker与其他综合 性的web应用安全扫描工具相比的一个特点是它能够更好的检测SQL Inje ...

  4. yii 常用路径

    yii::app()->homeurl //主页的网址 yii系统变量. //得到proteced目录的物理路径 Yii::app()->basePath; 调用YII框架中jquery: ...

  5. android tablelayout 显示图片

    当在tablelayout中显示图片时,设置imageView为固定大小时,会出现divide by zero 错误 将LayoutParams 改为 TableRow.LayoutParams即可 ...

  6. iOS - XML 数据解析

    前言 @interface NSXMLParser : NSObject public class NSXMLParser : NSObject 1.XML 数据 XML(Extensible Mar ...

  7. FFPEG 转码记录------解决了有流,但是没有码率和FPS?

    命令行:(已经测试成功) ffmpeg -i rtmp://localhost/live/S0000_8 -c:v libx264 -b:v 500k -c:a libfdk_aac -b:a 64k ...

  8. hibernate对象关系实现(一)一对多

    hibernate是对jdk一个封装工具,实现对象和数据库之间数据映射.使用时涉及到四个问题:a.对象之间的关系在类中的体现:b,对象关系对应的数据库中表之间体现:c.实现a,b在hibernate的 ...

  9. Myeclipse 主题下载

    Myeclipse 主题下载 下载网址: 1. 编辑区背景主题:http://www.eclipsecolorthemes.org 2. 框架主题:https://marketplace.eclips ...

  10. poj2540Hotter Colder(半平面交)

    链接 根据距离可以列得直线方程,附上初始矩形的四个顶点,依次用直线切割. #include<iostream> #include <stdio.h> #include < ...