• node服务器获取form表单


    搭建好服务器后

    (前言,本文只是介绍form表单直接提供给 本页面数据,即在不刷新页面的前提下更改数据

    在public里面添加index.html

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <script src="node_modules/jquery/dist/jquery.min.js"></script>
     7 </head>
     8 <body>
     9 <form method="post" action="hello">
    10     <label>
    11         name:
    12         <input type="text" name="name" required="required">
    13     </label>
    14     <input type="submit" value="submit">
    15 </form>
    16 <div id="result"></div>
    17 <script src="main.js"></script>
    18 </body>
    19 </html>

    在新建个main.js

     1 (function () {
     2 
     3     $("form").on("submit", function (e) {
     4         e.preventDefault();
     5 
     6         // console.log(this["name"].value, this.action, this.method);
     7 
     8         $.post(this.action, {name: this["name"].value}).done(function (data) {
     9             $("#result").html(data);
    10         }).fail(function (err) {
    11             alert("无法连接服务器");
    12         });
    13     });
    14 
    15 })();

    在routes里面的index文件中添加如下代码

    1 router.post("/hello", function (req, res) {
    2   res.render("hello", {name: req.body.name});
    3 });

    再在views文件夹下添加hello.jade文件

    1 html
    2     head
    3     title = "hello"
    4     body
    5         div hello #{name};

    ok,运行即可

    补充一下,send和render的区别

      send:直接处理数据,作用:把数据传到<body>标签中,只能传来get,即传过来搜索框中的内容(处理的是直接的数据

      render:意为渲染,作用,把一个文件渲染后,传到<body>标签中,使用post处理过得数据,传送给那个文件,后在传到<body>标签中。(处理的是文件

  • 相关阅读:
    贪吃蛇模块划分
    你今天听见《风声》了吗“ 学习无处不在继潜伏后《风声》观后
    贪吃蛇结束条件分析
    CSS fieldset制作表单,抛弃Table
    两个路由器串联
    .net 几种获取路径方法
    C# 对文件与文件夹的操作 删除、移动与复制
    mvc3在IIS中的部署(转)
    HTTP 错误 500.21 Internal Server Error
    遗留问题
  • 原文地址:https://www.cnblogs.com/chenluomenggongzi/p/5962775.html
Copyright © 2020-2023  润新知