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 div = document.createElement("div");

					div.style.display = 'none';

					div.innerHTML = '<iframe src=""></iframe>';

					document.body.appendChild(div);

					var ifrm = div.children[0];

					var cwin = ifrm.contentWindow;

					cwin.document.write(template);

					window.onmessage = function(e) {
                                                document.body.removeChild(div);

						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);

}

　　

JavaScript 跨域之 POST 实现。的更多相关文章

  1. JavaScript 跨域漫游

    前言: 最近在公司做了几个项目都涉及到了iframe,也就是在这些iframe多次嵌套的项目中,我发现之前对iframe的认识还是比较不足的,所以就静下心来,好好整理总结了iframe的相关知识:&l ...

  2. 利用javascript跨域访问cookie之广告推广

    在上一篇<说一说javascript跨域和jsonp>中,利用JSONP进行了跨域的数据访问,利用JS本身的跨域能力在远端生成HTML结构的方式完成了一个小广告. 在实际应用中, 跨域使用 ...

  3. Javascript跨域问题总结

    疯狂的JSONP 关于JSON与JSONP简单总结 window.name实现的跨域数据传输 JavaScript跨域总结与解决办法 flash跨域策略文件crossdomain.xml配置详解

  4. 优雅绝妙的Javascript跨域问题解决方案

    关于Javascript跨域问题的解决方案已在之前的一片文章中详细说明,详见:http://blog.csdn.net/sfdev/archive/2009/02/13/3887006.aspx: 除 ...

  5. JavaScript 跨域：window.postMessage 实现跨域通信

    JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...

  6. JavaScript跨域实现

    最近在做个上传文件的服务,其中包含一个上传的web页面.目的是想客户端页面嵌套这个web页面,然后直接将文件上传到服务器. 因为文件不同所以需要保存到的文件夹名称也不一样,所以客户端需要传递一个文件夹 ...

  7. thinkphp，javascript跨域请求解决方案

    javascript跨域请求解决方案 前言 对于很多前端或者做混合开发的同学,我们难免会遇到跨域发起请求业务,比如A站点向B站点请求数据等等.由于最近要做一个站点集群的项目,所以具体业务要求很多个站点 ...

  8. jQuery(三) javascript跨域问题(JSONP解决)

    加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...

  9. JavaScript跨域解决方式

    平时工作中经常被JavaScript跨域问题所困扰,其实有很多种解决方式,下面给大家介绍常用的几种: 1.jsonp解决跨域问题 客户端代码: <!DOCTYPE html> <ht ...

随机推荐

  1. FFmpeg API 变更记录

    最近一两年内FFmpeg项目发展的速度很快,本来是一件好事.但是随之而来的问题就是其API(接口函数)一直在发生变动.这么一来基于旧一点版本的FFmpeg的程序的代码在最新的类库上可能就跑不通了. 例 ...

  2. 远程调试Eclipse插件的设置

    1. 被调试方建立一个命令行来运行Eclipse debugEclipse.cmd: eclipse.exe -nl zh_CN -vmargs -XX:+HeapDumpOnOutOfMemoryE ...

  3. vbox centos安装增强工具

    就是虚拟机识别不了宿主机的usb接口,这个虚拟机有没有图形界面,看看怎么装. 一个是依赖包问题,另一个就是挂了安装包,但是我怎么找到它并安装上去的问题. 虚拟机是centos6.6哈 vbox4.3. ...

  4. 手把手教你打造一个心电图效果View Android自定义View

    大家好,看我像不像蘑菇-因为我在学校呆的发霉了. 思而不学则殆 丽丽说得对,我有奇怪的疑问,大都是思而不学造成的,在我书读不够的情况下想太多,大多等于白想,所以革命没成功,同志仍需努力. 好了废话不说 ...

  5. Android APP新的“优雅”退出方式--EventBus大显身手

    最近在研究eventBus..很多小伙伴不知道他有什么用.. 前篇介绍了EventBus的基本使用 这里简单举一个例子,就是退出APP 转载请注明出处:http://blog.csdn.net/win ...

  6. （七）大图展示Demo引出的UIScrollView的使用

    UIScrollView是一个能够滚动的视图控件,可以通过滚动查看所有内容. 用途: 1.一张大图屏幕放不下,可以用各个方向的手势来看大图的各个部分. 2.手机的设置页面有很多的选项,需要上下滚动来查 ...

  7. 【Matlab编程】Matlab及Java小时钟

    一年前曾经用matlab的gui做了一个时钟,由于是直接用GUIDE和ActiveX控件写的,程序虽说有许多行,大多数都是自动生成的,自己写的只有十几行而已.闲着没事,就耗费了下午的时间用matlab ...

  8. 程序员的视角：java 线程

    在我们开始谈线程之前,不得不提下进程. 无论进程还是线程都是很抽象的概念,有一个关于进程和线程很形象的比喻能帮我们更好的理解. 进程就像个房子,房子是一个包含了特定属性的容器,例如空间大小.卧室数量等 ...

  9. linux内核中的C语言常规算法(前提:你的编译器要支持typeof和type)

    学过C语言的伙伴都知道,曾经比较两个数,输出最大或最小的一个,或者是比较三个数,输出最大或者最小的那个,又或是两个数交换,又或是绝对值等等,其实这些算法在linux内核中通通都有实现,以下的代码是我从 ...

  10. 【Java编程】随机数的不重复选择

    随机数的不重复选择就是从n个数中随机选取m(m<n)个数.在本文中,我们用Java来实现.因此我们先介绍Java的相关知识. 在Java中,Java.util.Set接口和Java.util.L ...