欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

node.js 处理ajax get和post信息

程序员文章站 2024-01-19 11:37:40
...

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-With,Content-Type');//可以支持的消息首部列表
    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文件,点击第一个发送结果:
node.js 处理ajax get和post信息
浏览器端控制台的结果:
node.js 处理ajax get和post信息
第二种方式的结果:
node.js 处理ajax get和post信息
node.js 处理ajax get和post信息
数据成功返回了

nodejs 处理post请求

要做的准备(依赖包)

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

创建一个js文件命名为postApi.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-With,Content-Type');//可以支持的消息首部列表
    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);
            }
        });
    });

结果:
node.js 处理ajax get和post信息
同样试试原生的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:
node.js 处理ajax get和post信息

node.js 处理ajax get和post信息
欢迎评论点赞哦