###以x-www-form-urlencoded方式传值。 前端: 1,在表单提交的时候放上监听,阻止表单的默认事件 2,将表单内容序列化 3,利用ajax提交序列化后的表单,注意在头部请求中设置编码格式html
前端表单代码:前端
<form id="form1" > <input type="text" name="apple" id="apple"> <input type="text" name="apple2" id="apple2"> <button type="submit">submit</button> </form>
前端js代码ajax
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方式传值。express
前端js代码:json
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); } }
后台代码app
'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"); });