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. 百度的android面试总结分析

    今天就是今天上午10点,我接到了百度的电话面试,当然提前和我说了,我的拖延症是有多强烈,以至于我没怎么准备,当然我也想着看看自己的真实水平,在此检讨一下!!!!!!!!!!!!!!!!!!!!!!!! ...

  2. 【一天一道LeetCode】#119. Pascal's Triangle II

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...

  3. Mybatis源码之Statement处理器BaseStatementHandler（二）

    BaseStatementHandler是一个抽象类,并没有实现和CURD相关的类,只是更多的设置了一些参数相关. 源码如下: /** * @author Clinton Begin */ publi ...

  4. UNIX环境高级编程——System V 共享内存区

    共享内存区域是被多个进程共享的一部分物理内存.如果多个进程都把该内存区域映射到自己的虚拟地址空间,则这些进程就都可以直接访问该共享内存区域,从而可以通过该区域进行通信.共享内存是进程间共享数据的一种最 ...

  5. React Native调试心得

    在做React Native开发时,少不了的需要对React Native程序进行调试.调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低Bug率.本文将向大家分享React Na ...

  6. TCP的ACK确认系列 — 快速确认

    主要内容:TCP的快速确认.TCP_QUICKACK选项的实现. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd 快速确认模式 (1) 进入快速确认模式 ...

  7. 总账balance表

    SELECT gb.period_net_dr, --期间发生额        gb.period_net_cr, --期间发生额        gb.project_to_date_dr, --账户 ...

  8. FilterDispatcher is depredated!plesae use the new filters

    一些struts2的教程都是比较早的,当我们基于较新版本的struts2来实现代码的时候,往往会出现一些问题.比如这个警告:FilterDispatcher isdeprecated! 在web.xm ...

  9. Linux Shell 命令--awk

    说明: awk被设计用于数据流,能够对列和行进行操作.而sed更多的是匹配,进行替换和删除.awk有很多内建的功能,比如数组,函数等.灵活性是awk的最大优势.  awk的结构}{i++}END{pr ...

  10. 集群通信组件Tribes之如何维护集群成员信息

    一个集群包含若干成员,要对这些成员进行管理就必须要有一张包含所有成员的列表,当要对某个节点做操作时通过这个列表可以准确找到该节点的地址进而对该节点发送操作消息.如何维护这张包含所有成员的列表是本节要讨 ...