前台提交数据到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添加一个路由规则:

  (代码同上)

 

 

 

 

   

转载于:https://www.cnblogs.com/licurry/p/6736371.html

你可能感兴趣的:(前台提交数据到node服务器(post方式))