13、NodeJs接收并处理form表单、Ajax数据

阅读() @2018-10-29 18:16:11

前端向后端提交数据,整体上有2种方法,一种是form表单,一种是ajax,这两种方法都分get和post两种方式,下面是具体代码:

一、前端通过get提交数据:

1、form表单:

<form action="/regist" method="get">
      <input type="text" name="uname" placeholder="用户名" />
      <input type="text" name="upwd" placeholder="密码" />
      <input type="submit" value="注册" />
</form>

后端数据处理:

router.get('/regist', function(request, response){
    db('insert into blog_user set uname="'+request.query.uname+'", upwd="'+request.query.upwd+'"', function(){
        console.log('插入数据成功');
    });
});

2、ajax提交数据:

<div>
        <input type="text" id="uname" placeholder="用户名" />
        <input type="text" id="upwd" placeholder="密码" />
        <input type="button" id="sub" value="注册" />
    </div>
    <script type="text/javascript" src="http://www.zymseo.com/js/demo.js"></script>
    <script type="text/javascript">
        $('#sub').click(function(){
            $.ajax({
                url : '/regist',
                type : 'get',
                data : {
                    uname : $('#uname').val(),
                    upwd : $('#upwd').val()
                },
                success : function(data){
                    if(data.message=='success'){
                        alert('注册成功!');
                    }
                }
            });
        });
    </script>

后端接收数据:

router.get('/regist', function(request, response){
    db('insert into blog_user set uname="'+request.query.uname+'", upwd="'+request.query.upwd+'"', function(){
        response.json({
            message : 'success'
        });//如果数据库操作成功,则返回结果
    });
});

一、前端通过post提交数据:

注意:Node使用post提交数据,需要单独安装一个模块【body-parser】,在package.json的dependencies中添加【"body-parser" : "latest"】。关于适用npm安装node模块的方法,可以参考《学习安装NodeJs环境和NPM》。

然后在app.js中添加以下两段代码:

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

//用来接收post提交的json数据
app.use(bodyParser.json());
//也可以接收任何数据类型的数据,包括文本、视频、图片等
app.use(bodyParser.urlencoded({extended:true}));

1、form表单:

<form action="/regist" method="post">
        <input type="text" name="uname" placeholder="用户名" />
        <input type="text" name="upwd" placeholder="密码" />
        <input type="submit" value="注册" />
 </form>

后端数据处理:

router.post('/regist', function(request, response){
    db('insert into blog_user set uname="'+request.body.uname+'", upwd="'+request.body.upwd+'"', function(){

    });
});

2、ajax提交数据:

<div>
        <input type="text" id="uname" placeholder="用户名" />
        <input type="text" id="upwd" placeholder="密码" />
        <input type="button" id="sub" value="注册" />
    </div>
    <script type="text/javascript" src="http://www.zymseo.com/js/demo.js"></script>
    <script type="text/javascript">
        $('#sub').click(function(){
            $.ajax({
                url : '/regist',
                type : 'post',
                data : {
                    uname : $('#uname').val(),
                    upwd : $('#upwd').val()
                },
                success : function(data){
                    if(data.message=='success'){
                        alert('注册成功!');
                    }
                }
            });
        });
    </script>

后端接收数据:

router.post('/regist', function(request, response){
    db('insert into blog_user set uname="'+request.body.uname+'", upwd="'+request.body.upwd+'"', function(){
        response.json({
            message : 'success'
        });
    });
});
//注意post方法用request.body对象来接受前端提交的数据

(本节完!)

微信二维码