TLScott

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

posted on 2019-03-21 17:20  TLScott  阅读(1487)  评论(0编辑  收藏  举报

导航