zoukankan      html  css  js  c++  java
  • 前台提交数据到node服务器(post方式)

    post方式同样有两种办法,一种是表单提交,一种是ajax提交。

    在此之前需要安装一个中间件:body-parser,安装好后在app.js头部引入:

    1 bodyParser = require('body-parser');

    并且添加配置代码:

    1 //接收json数据
    2 app.use(bodyParser.json());
    3 //extended:true代表可以接收任何数据类型的数据
    4 app.use(bodyParser.urlencoded( { extended : true } ));

     1、form提交:

      前台模板文件post.ejs上写如下代码:

    1 <form action="/reg" method="post">
    2         <input type="text" name="name" />
    3         <input type="password" name="password" />
    4         <input type="submit"  />
    5 </form>

      index.js添加一个路由规则:

     1 //添加路径,通过该路径响应post.ejs模板
     2 router.get('/post',(req,res) => {
     3     res.render('post.ejs');
     4 });
     5 router.post('/reg',(req,res) => {
     6     //req.body 用来接收post方式提交的数据
     7     sql('insert into `user` (`id`,`username`,`password`) values (0,?,?)',[req.body.name,req.body.password],(err,result) => {
     8         if (err){
     9             console.log('[INSERT ERROR] - ',err.message);
    10             return;
    11         }
    12         res.json({
    13             success : '[INSERT SUCCESS] - '
    14         });
    15     });
    16 });

    2、ajax提交:

      前台模板文件post.ejs写如下代码:

     1     <input type="text" name="name" class="name" />
     2     <input type="password" name="password" class="psw" />
     3     <input type="submit" class="submit" />
     4     <script src="/jquery.js"></script>
     5     <script>
     6         $('.submit').click(function () {
     7             $.ajax({
     8                 url : '/reg',
     9                 type : 'post',
    10                 data : {
    11                     name : $('.name').val(),
    12                     password : $('.psw').val()
    13                 },
    14                 success : function (data) {
    15 
    16                 }
    17             });
    18         });
    19     </script>

      index.js添加一个路由规则:

      (代码同上)

       

  • 相关阅读:
    动态网页技术--JSP(5)
    动态网页技术--JSP(4)
    动态网页技术--JSP(3)
    动态网页技术--JSP(2)
    动态网页技术--JSP(1)
    动态网页技术--Servlet
    TomCat服务器搭建
    06_多线程
    05_进程间通信 IPC
    04_进程池
  • 原文地址:https://www.cnblogs.com/licurry/p/6736371.html
Copyright © 2011-2022 走看看