express 前后端post方法传值问题

2019独角兽企业重金招聘Python工程师标准>>>

###以x-www-form-urlencoded方式传值。 前端： 1，在表单提交的时候放上监听，阻止表单的默认事件 2，将表单内容序列化 3，利用ajax提交序列化后的表单，注意在头部请求中设置编码格式

前端表单代码：

<form id="form1" >
    <input type="text" name="apple" id="apple">
    <input type="text" name="apple2" id="apple2">
    <button type="submit">submit</button>
</form>

前端js代码

    window.onload = function () {
        var form1 = document.getElementById("form1");
        form1.addEventListener("submit",function (event) {  //两个参数：事件名称，回调函数。
            event.preventDefault();  //阻止表单的默认事件
            sendMessage();
        });
        function sendMessage() {
            var xhr = new XMLHttpRequest();  //新建XMLHttpRequest对象
            xhr.onreadystatechange = function () {
                if(xhr.readyState === 4){
                    if((xhr.status>=200&&xhr.status<300)||xhr===304){
                        alert(xhr.responseText);
                    }
                    else {
                        alert("error");
                    }
                }
            };
            xhr.open("post","testPost",true);//接受三个参数：提交方式，后台路由，是否异步
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  //用x-www-form-urlencoded方式传值时需要发送头部请求.
            xhr.send(serialize(form1));
        }
    };
    function serialize(form) {  //将表单内容序列化
        var parts = [],
            field = null,
            i,
            len;
        for(i=0,len=form.elements.length;i<len;i++){//遍历表单元素，将键，值分别编码，再用&连接。
            field = form.elements[i];
            if(field.name.length){
                parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(field.value));
            }
        }
        return parts.join("&");
    }

###以x-www-form-urlencoded方式传值。

前端js代码：

    window.onload = function () {
        var form1 = document.getElementById("form1");
        form1.addEventListener("submit",function (event) {
            event.preventDefault();
            sendMessage();
        });
        function sendMessage() {
           var xhr = new XMLHttpRequest();
           xhr.onreadystatechange = function () {
               if(xhr.readyState === 4){
                   if((xhr.status>=200&&xhr.status<300)||xhr===304){
                       alert(xhr.responseText);
                   }
                   else {
                       alert("error");
                   }
               }
           };
           xhr.open("post","testPost",true);
           var formData = new FormData(form1);//不需要头部请求,但是要新建FormData对象
           formData.append("apple3","apple3");//向formData中新加入一条键值对.
           xhr.send(formData);
        }
    }

后台代码

'use strict';
const express =require('express');
const orm=require('orm');
const app = express();
var bodyParser = require('body-parser'); //注意：用urlencoded方法传值时要引用body-parser包
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());  //分别支持urlencoded与json
// var multer = require('multer'); //用formdata传值时要引用multer包。
// var upload = multer();
app.use(express.static('public'));

app.get('/',function (req,res) {
    res.sendFile(__dirname+"/public/html/test.html") //__dirname表示项目根目录
});

app.post('/testPost',function (req,res) {  //formData传值这样写'/testPost',upload.single(),function
    var parts = new Object();
    parts.apple = req.body.apple;//接受键名为apple的值
    parts.apple2 = req.body.apple2;
    var sendMessage = JSON.stringify(parts);
    res.send(sendMessage);
});

app.listen(3000,function () {
    console.log("This");
});

转载于:https://my.oschina.net/u/3400107/blog/1506497