node.js 处理ajax get和post信息

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/towrabbit/article/details/81663394

node.js 处理get请求

要做的准备工作

1.express依赖包
2.url模块 用于对url格式的字符串进行解析，返回一个对象。根据不同的url进行处理，返回不同的数据。

创建js文件:getApi.js

/*引用模块*/
var express = require('express');
var app = express();
var url = require('url');//url模块,对url格式的字符串进行解析，返回一个对象。根据不同的url进行处理，返回不同的数据。

app.all('*',function(req,res,next){
    res.header('Access-Control-Allow-Origin','*');//*表示可以跨域任何域名都行（包括直接存在本地的html文件）出于安全考虑最好只设置 你信任的来源也可以填域名表示只接受某个域名
    res.header('Access-Control-Allow-Headers','X-Requested-Width');//可以支持的消息首部列表
    res.header('Access-Control-Allow-Methods','PUT,POST,GET,DELETE,OPTIONS');//可以支持的提交方式
    res.header('Content-Type','application/json;charset=utf-8');//响应头中定义的类型
    next();
});
/*随便定义一个要返回的信息*/
var mans = [
    {
        name:'小猫猫',
        age:16,
        gender:'boy'
    },
    {
        name:'小兔兔',
        age:15,
        gender:'girl'
    }
];

app.get('/get',function(req,res){
    console.log(req.url);//这里可以打印出请求的url看一下
    var parseObj = url.parse(req.url, true);//对url进行解析 将第二个参数设置为true会将query属性生成为一个对象
    //console.log(parseObj);//这里包含了很多信息有兴趣可以看一下 了解一下
    var queryObj = parseObj.query;//只获取参数的对象
    res.status(200);
    console.log('发送过来的信息:');
    console.log(queryObj);//get的信息中的值全为字符串 
    queryObj.age = parseInt(queryObj.age);//将有必要转化的值进行转化

    mans[1]=queryObj;
    res.json(mans);//返回一个对象数组
    //res.send(mans);//一样的效果这个较为通用一些 不仅仅可以发送json
});

var server = app.listen(3000, function(){//监听3000端口

    var port = server.address().port;

    console.log('Example app listening on port:%s',port);
});

本地的发送get信息的html：

<div id="data"></div>
<button id="send">发送</button>
<button id="send2">发送（第二种方式）</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    var sendBtn = $('#send');
    if(sendBtn){
        sendBtn.click(function(){
            $.ajax({
                type: 'get',
                url: 'http://www.xxxxxx.xxx:3000/get?name=yes&age=16&gender=boy',//这个url直接粘贴进浏览器地址栏也能够看到返回的信息
                success: function(data){
                    console.log(data);
                    var dataEl = document.getElementById('data');
                    if(dataEl){
                        dataEl.innerText = '姓名：'+ data[0].name + '，年龄：' + data[0].age + "，性别："+data[0].gender;
                        dataEl.innerHTML += '<br/>';
                        dataEl.innerText += '发送的名字：' + data[1].name + '，发送的年龄:' + parseInt(data[1].age) + '，发送的性别:'+data[1].gender;
                    }
                },
                error: function () {
                    console.log('error');
                }
            });
        });
    }
    var sendBtn2 = $('#send2');
    if(sendBtn2){
        sendBtn2.click(function(){
            $.get("http://www.xxxxxx.xxx:3000/get", { name: "towrabbit2", age: 23, gender:'boy' },
                function(data){
                    console.log("Data Loaded: ");
                    console.log(data);
                    var dataEl = document.getElementById('data');
                    if(dataEl){
                        dataEl.innerText = '姓名：'+ data[0].name + '，年龄：' + data[0].age + "，性别："+data[0].gender;
                        dataEl.innerHTML += '<br/>';
                        dataEl.innerText += '发送的名字：' + data[1].name + '，发送的年龄:' + data[1].age + '，发送的性别:'+data[1].gender;
                    }
            });
        })
    }
</script>

服务器端运行getApi.js并进行测试
打开本地的ajaxget请求的html文件，点击第一个发送结果：

浏览器端控制台的结果：

第二种方式的结果：


数据成功返回了

nodejs 处理post请求

要做的准备（依赖包）

1.express
2.bodyParser依赖包， http post请求解析中间件

创建一个js文件命名为post.js:

var express = require('express');
var app = express();
var bodyParser = require('body-parser');//express http post请求解析中间件

app.all('*',function(req,res,next){
    res.header('Access-Control-Allow-Origin','*');//*表示可以跨域任何域名都行 也可以填域名表示只接受某个域名
    res.header('Access-Control-Allow-Headers','X-Requested-Width');//可以支持的消息首部列表
    res.header('Access-Control-Allow-Methods','PUT,POST,GET,DELETE,OPTIONS');//可以支持的提交方式
    res.header('Content-Type','application/json;charset=utf-8');//请求头中定义的类型
    next();
});

app.use(bodyParser.urlencoded({extended:true}));//用于解析表单数据 Context-Type 为application/x-www-form-urlencoded 时 返回的对象是一个键值对，当extended为false的时候，键值对中的值就为'String'或'Array'形式，为true的时候，则可为任何数据类型。
app.use(bodyParser.json());//用于解析json 会自动选择最为适宜的解析方式

var mans = [
    {
        name:'小猫猫',
        age:16,
        gender:'boy'
    },
    {
        name:'小兔兔',
        age:15,
        gender:'girl'
    }
];

app.post('/login',function(req,res){
    console.log(req.body);
    if(req.body.username=='nyan'&&req.body.password=='nyannyannyan'){
        res.status(200);
        mans[2] = req.body;
        res.json(mans);
    }else{
        res.json({failed:404});
    }
    res.end();
});

var server = app.listen(3000, function(){

    var port = server.address().port;

    console.log('Example app listening on port:%s',port);
});

在服务器上运行postApi.js 并进行测试

jquery ajax测试：
html：

<button id="postSend">发送</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    $('#postSend').click(function(){
        $.ajax({
            data: {
                username:'nyan',
                password:'nyannyannyan',
                age:23
            },
            url: 'http://www.xxxxxx.xxx:3000/login',
            dataType: 'json',
            type:'POST',
            cache: false,
            timeout: 5000,
            success: function(data){//这里后台返回的信息已经是json对象
                //var data = $.parseJSON(data);
                console.log(data);
            },
            error: function(jqXHR, textStatus, errorThrown){
                console.log('error ' + textStatus + " " + errorThrown);
            }
        });
    });

结果：

同样试试原生的form表单
html:

<form class="form-horizontal" method="post" action="http://www.xxxxxx.xxx:3000/login">
    <label for="username">名字</label>:<input type="text" placeholder="用户名" id="username" name="username"><br>
    <label for="password">密码</label>:<input type="text" placeholder="密码" id="password" name="password"><br>
    <label for="age">年龄</label>:<input type="number"  placeholder="年龄" id="age" name="age">
    <button type="submit" class="btn btn-default">提交</button>
</form>

返回的json：

欢迎评论点赞哦