这次给大家带来怎样用js跨域实现post，js跨域实现post的注意事项有哪些，下面就是实战案例，一起来看一下。
javascript 跨域是一个很常见的问题，其中 jsonp 是一个最常用的手段，但是 jsonp 只支持 get，不支持 post，所以如果想通过 jsonp 来 post 一些数据，就头大了。
此处通过在一个 iframe 中生成 form 表单的形式来实现 post，并通过 postmessage 来向调用者返回值。
第一步，我们先实现一个接受 jsonp 的后端代码，至于用什么语言实现，各位自已决定。
c#代码是：
protected void page_load(object sender, eventargs e)
{
stringbuilder sbret = new stringbuilder();
sbret.append(<script>);
sbret.append(request[jsoncallback]);
sbret.append(({);
foreach (string k in request.form) {
if (k == jsoncallback) continue;
sbret.append('+k+':'+request.form[k]+');
}
sbret.append(}););
sbret.append(</script>);
response.write(sbret.tostring());
response.end();
}
比如说你想返回给我的是 { username:'user1', password:'pass1' } ， 当我调用 http://localhost/test?jsoncallback=callme 的时候
你实际返回 <script>callme({ username:'user1', password:'pass1' })</script> 即可。
第二步，本地文件夹内构建post测试页面，如 d:\test.html
<form action="http://localhost/test" method="post">
<input type="text" name="username" value="user1" />
<input type="text" name="password" value="pass1" />
<input type="text" name="jsoncallback" value="callme" />
<input type="submit" value="提交" />
</form>
第三步，浏览一下并点击提交，看看返回的如果是 <script>callme({ username:'user1', password:'pass1' })</script>则说明后端程序没有问题了。
第四步，我们写段通用的代码来实现上面的 html.
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>测试一哈</title>
</head>
<body>
<script>
//源码 开始
function postjsonp(url, data, callback) {
var template = '<form action="{{url}}" method="post" id="form1">';
for (var k in data) {
template = template
+ ' <input type="text" name="'+k+'" value="'+data[k]+'" />'
}
template = template
+ '<input type="text" name="jsoncallback" value="function callback(data) { parent.postmessage(data, \'*\'); } callback" />'
+ '</form>'
+ '<'+'script>'
+ 'document.getelementbyid(form1).submit();'
+ '</'+'script>';
template = template.replace({{url}}, url);
var p = document.createelement(p);
p.style.display = 'none';
p.innerhtml = '<iframe src=""></iframe>';
document.body.appendchild(p);
var ifrm = p.children[0];
var cwin = ifrm.contentwindow;
cwin.document.write(template);
window.onmessage = function(e) {
if (callback) callback(e.data);
}
}
//源码 结束
//使用测试
window.onload = function() {
postjsonp('http://localhost:59898/webform1.aspx', { username: '张静', password: '就不告诉你' }, function(data) {
console.log(11, data);
});
postjsonp('http://localhost:59898/webform1.aspx', { 仓库: '1号大仓', 面积: '2万平米' }, function(data) {
console.log(22, data);
});
}
</script>
</body>
</html>
第五步、安全问题、
window.onmessage = function(e) {
//可通过 e 来判断来源，并做一些安全方面的处理，此处读者自己去研究吧，可以加个 console.log(e) 看看 e 有哪些内容。
if (callback) callback(e.data);
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
js怎么求得最小公倍数和最大公约数
vue中地区选择器组件使用详解
以上就是怎样用js跨域实现post的详细内容。