美文网首页
用js原生的xhr请求后端+nodeJs后端接口实现

用js原生的xhr请求后端+nodeJs后端接口实现

作者: 林玲玲的笔记 | 来源:发表于2021-10-19 18:29 被阅读0次

html中请求后端方法中部分代码:

 onSubmit:function(){
            var xhr = function () {
                        if(window.XMLHttpRequest){
                            return new XMLHttpRequest();
                        }else{
                            return new ActiveXObject("Microsoft.XMLHTTP");// IE6, IE5 浏览器执行代码
                        }
                    }();
                    xhr.onreadystatechange = function () {
                        switch(xhr.readyState){
                            case 0:
                                console.log(0,'未初始化...');
                                break;
                            case 1:
                                console.log(1,'请求参数已准备,尚未发送请求...');
                                break;
                             case 3:
                                 console.log(3,'已接收数据长度:'+xhr.responseText.length);
                                 break;
                            case 4:
                                console.log(4,'响应全部接受完毕');
                                if((xhr.status >=200 && xhr.status < 300) || xhr.status ==304){
                                    var databox = xhr.responseText;
                                    console.log(databox)
                                }else{
                                    console.log('error:'+ xhr.status)
                                }
                                break;
                        }
                    }
                    var data = this.encodeFormData({
                        articleTxt:this.articleTxt.innerHTML, //富文本内容
                        title: this.title //标题
                    });
                    xhr.open('POST','http://localhost:99/formdata',true);
                    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //formdata数据请求头需设置为application/x-www-form-urlencoded
                    xhr.send(data);
}

node.js中接受formData数据的模拟接口:

let express = require('express');
let app = express();

const bodyParser = require('body-parser');
app.use(bodyParser.json());//数据JSON类型
app.use(bodyParser.urlencoded({ extended: false }));//解析post请求数据

app.all('*',function(req,res,next){  
 let origin=req.headers.origin;
   res.setHeader('Access-Control-Allow-Origin',"*");
   res.setHeader('Access-Control-Allow-Headers','Content-Type');
   res.setHeader('Content-Type', 'application/json')
    next();
})

app.post('/formdata',function(req,res){  
    console.log(req.body);    
    res.send('POST发送成功了')
})

app.listen(99);
console.log('port is on 99.')

相关文章

网友评论

      本文标题:用js原生的xhr请求后端+nodeJs后端接口实现

      本文链接:https://www.haomeiwen.com/subject/gfztaltx.html