js post方式传递提交的实现代码

复制代码 代码如下:

jspost提交数据实际上相当粗略大家纵然使用js创立贰个表单,然后设置form的method为post就足以了,上边整理了五个实例,希望对各位有帮衬

至于http协议里定义的4种常见数据的post方法
,详细介绍请点击查看.
个别是那三种:

function post(URL, PARAMS) {
  var temp = document.createElement("form");
  temp.action = URL;
  temp.method = "post";
  temp.style.display = "none";
  for (var x in PARAMS) {
    var opt = document.createElement("textarea");
    opt.name = x;
    opt.value = PARAMS[x];
    temp.appendChild(opt);
  }
  document.body.appendChild(temp);
  temp.submit();
  return temp;
}
function onFdo(text) {
var url = "./";
var arr = new Array();
arr["from"] = "restart";
arr["msg"]  =  text;
post(url,arr);
}

var myForm = document.createElement(“form”);
myForm.method=”get” ;
myForm.action = “line_ticket.aspx” ;
var myInput = document.createElement(“input”) ;
myInput.setAttribute(“name”, “id”) ;
myInput.setAttribute(“value”, idStr);
myForm.appendChild(myInput) ;

例1

www-form-urlencoded,
form-data,
application/json,
text/xml

var myInput2 = document.createElement(“input”) ;
myInput2.setAttribute(“name”, “fid”) ;
myInput2.setAttribute(“value”, fid);
myForm.appendChild(myInput2) ;

 代码如下

Express 依赖 bodyParser
对央浼的包体实行解析,私下认可扶助:application/json,
application/x-www-form-urlencoded,
multipart/form-data.缺憾对xml未有帮衬,要求和谐代码来落到实处,下边大家一一简介.

var myInput3 = document.createElement(“input”) ;
myInput3.setAttribute(“name”, “unlock”) ;
myInput3.setAttribute(“value”, unlock);
myForm.appendChild(myInput3) ;

复制代码

(一) www-form-urlencoded

http暗中认可的post诉求是这种方法,注意那是是暗中认可的交付情势,例如您写二个<form>….<input
type=”submite” /></form> form表单,里面包车型客车submite开关暗中认可正是这种
www-form-urlencoded 形式提交的.
node.js 下使用Express 怎样接受这种提交格局.必要 body-parse
插件帮助,Express 和body-parse
的重视性关系在4.0以下版本和4.0以上版本是不相同的,可以搜寻本站
body-parse 关键词查看.

var express = require('express')
var bodyParser = require('body-parser')
var app = express();var server = require('http').createServer(app)
app.use(bodyParser.urlencoded({ extended: true}))
var PORT = process.env.PORT || 8002;server.listen(PORT)

下面搭建起三个大概的server ,node app.js 运转起来,未来是能够选择 post
www-form-urlencoded类型参数的.
我们在地方的代码中丰硕二个路由.

app.post('/urlencoded', function (req, res) {  
console.log(req.body);  res.send(req.body);
});
//注意,这个路由应该是加在 var PORT=process.env.PORT || 8002; 

地方今后用postman模拟二个post央浼,
红框钦定了交给格局是 www-form-urlencoded 方式

图片 1

index.png

能够看出 200 状态,成功识别了诉求参数何况重临来.

var myInput4 = document.createElement(“input”) ;
myInput4.setAttribute(“name”, “Option”) ;
myInput4.setAttribute(“value”, “del”);
myForm.appendChild(myInput4) ;
document.body.appendChild(myForm) ;
myForm.submit() ;
document.body.removeChild(myForm) ;

var myForm = document.createElement(“form”);
myForm.method=”get” ;
myForm.action = “line_ticket.aspx” ;
var myInput = document.createElement(“input”) ;
myInput.setAttribute(“name”, “id”) ;
myInput.setAttribute(“value”, idStr);
myForm.appendChild(myInput) ;

(二) form-data

也是比较常用的付出数据的主意,和地点一种分歧的是form表单里需求有 enctype
标记.
诸如大家在上传文件的时候,必得在form标签里做这么的标记enctype=”multipart/form-data”
而这种提交情势相似用在文书上传,所以 在node.js 里管理那类表单还索要
中间件 connect-multiparty
,他是专程管理此类post数占领关的依据包.github官方地址:
https://github.com/andrewrk/connect-multiparty
npm install connect-multiparty
应用也特别轻巧,上面包车型大巴代码不改变,只需求在你的相关路由里钦命个中间件,它就足以帮您管理诉求.

var multipart = require('connect-multiparty')
var multipartMiddleware = multipart()
app.post('/formdata',multipartMiddleware, function (req, res) {  
console.log(req.body);  res.send(req.body)
})

作者用postman模拟,没有章程上传文件,只模拟表单…参数同样直接回到客商端,

图片 2

index.png

代码如下: var myForm =
document.createElement(“form”); myForm.method=”get” ; myForm.action =
“line_ticket.aspx” ; var myInput = document.createElement(“input”) ;
m…

var myInput2 = document.createElement(“input”) ;
myInput2.setAttribute(“name”, “fid”) ;
myInput2.setAttribute(“value”, fid);
myForm.appendChild(myInput2) ;

(三) application/json

一般api喜欢此类提交方式,数据运用格局,节省带宽.
bodyParser 帮衬此类参数深入分析.
当心: 在付给此前须要钦定http 需要头为 content-type=application/json
代码如下:

var express = require('express');var bodyParser = require('body-parser');var multipart = require('connect-multiparty');var multipartMiddleware = multipart();//var morgan = require('morgan');var app = express();var server = require('http').createServer(app);app.use(bodyParser.json({limit: '1mb'}));  //这里指定参数使用 json 格式app.use(bodyParser.urlencoded({  extended: true}))
app.post('/json', function (req, res) {  
console.log(req.body);  res.send(req.body)
})
var PORT = process.env.PORT || 8002;server.listen(PORT)

注意上面的布署参数,钦点参数使用json格式.

app.use(bodyParser.json({limit: '1mb'}));

图片 3

index.png

var myInput3 = document.createElement(“input”) ;
myInput3.setAttribute(“name”, “unlock”) ;
myInput3.setAttribute(“value”, unlock);
myForm.appendChild(myInput3) ;

(四) text/xml

这种央浼类型不是特意常见,
body-parse暗中认可也不分析这种数据格式,近年来Tencent微信平台在选拔这种数据交流格式.node.js
在express
如何深入分析这种格式,未有好的措施,只好和谐用代码管理,把诉求体参数依据字符串读抽出来,然后使用
xml2json 包把字符串分析成json对象,使用起来就便于多了.
注意:
笔者们依旧要采用 body-parse 获得字符串,然后再转化.
xml格式要求必要钦点 http 央浼头 content-type=text/xml
运用req上定义的风云 data 来赢得http央求流, end 事件甘休伏乞流的管理.
使用 xml2json 把地点得到的央求参数流(大家平昔转接为字符串)转化为 json
对象.

npm install xml2json

代码如下:

var express = require('express');
var bodyParser = require('body-parser');
var xml2json=require('xml2json');
var app = express();
var server = require('http').createServer(app);
app.use(bodyParser.urlencoded({  extended: true}));
app.post('/xml', function (req, res) {  
req.rawBody = '';  
var json={};  
req.setEncoding('utf8');  
req.on('data', function(chunk) {   
req.rawBody += chunk;  });  
req.on('end', function() {  
json=xml2json.toJson(req.rawBody);    
res.send(JSON.stringify(json));  
});  
});
var PORT = process.env.PORT || 8002;server.listen(PORT);

作者们最终也是把提交的xml格式字符串转化成json对象输出到客商端.

图片 4

index.png

http://yijiebuyi.com/blog/90c1381bfe0efb94cf9df932147552be.html

var myInput4 = document.createElement(“input”) ;
myInput4.setAttribute(“name”, “Option”) ;
myInput4.setAttribute(“value”, “del”);
myForm.appendChild(myInput4) ;
document.body.appendChild(myForm) ;
myForm.submit() ;
document.body.removeChild(myForm) ;

例2 
 

 代码如下

复制代码

<script type=”text/javascript”>
function postwith(to, p) {
var myForm = document.create_r_r_rElement_x(“form”);
myForm.method = “post”;
myForm.action = to;
for ( var k in p) {
var myInput = document.create_r_r_rElement_x(“input”);
myInput.setAttribute(“name”, k);
myInput.setAttribute(“value”, p[k]);
myForm.a(myInput);
}
document.body.a(myForm);
myForm.submit();
document.body.removeChild(myForm);
}
</script>

 
 
超链接的代码:

 代码如下

复制代码

 
<a
href=”javascript:postwith(‘datatest.action’,{‘currentPage’:’2′,’xisuo’:’计算机’})”>use
js to post</a>

 
点击超链接后能够将currentPage、xisuo的值以post的款型发送到datatest.action进行拍卖,非常是在管理几个参数的时候显得拾壹分便于

例1 代…

发表评论

电子邮件地址不会被公开。 必填项已用*标注