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. Dynamics CRM 在报表中获取当前登陆用户的guid

    <span style="font-size:18px;">CRM提供函数,只需在报表中调用即可.</span> <pre class="s ...

  2. Sprite添加阴影摇摆动画（Unity3D开发之九）

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2D开发网–Cocos2Dev.com,谢谢! 原文地址: http://www.cocos2dev.com/?p=575 今天看到一个很简单的摇摆动 ...

  3. JUI/DWZ 分页 Servlet

    分页介绍 参考:官方用户手册中的"分页组件"         分页思路服务器返回当前页的数据,总条数,再由js来生成分页标签.分页是配合服务器端来处理的, 不是存js做的分页. 因 ...

  4. 【一天一道LeetCode】#64. Minimum Path Sum.md

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

  5. 基于FT5x06嵌入式Linux电容触摸屏驱动

    **************************************************************************************************** ...

  6. Linux Android 多点触摸协议 原文出自【比特网】，转载请保留原文链接：http://soft.chinabyte.com/os/71/12306571.shtml

    为了使用功能强大的多点触控设备,就需要一种方案去上报用户层所需的详细的手指触摸数据.这个文档所描述的多点触控协议可以让内核驱动程序向用户层上报任意多指的数据信息. 使用说明 单点触摸信息是以ABS承载 ...

  7. 网易内推（Android） 拿offer

    学校BBS上师兄发网易内推,凑下热闹投了一发 一面:电话面 大概25分钟,感觉面试官气场很足,主要关注了其中一个 个人开源项目 1.自我介绍 2.说说你做的这个项目 当时谈到使用到了开源框架xtuil ...

  8. 关于jQuery中的trigger和triggerHandler方法的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. volatile和synchronized的区别和联系

    volatile 它所修饰的变量不保留拷贝,直接访问主内存中的.   在Java内存模型中,有main memory,每个线程也有自己的memory (例如寄存器).为了性能,一个线程会在自己的mem ...

  10. 取消选中单选框radio的三种方式

    作者: 铁锚 日期: 2013年12月21日 本文提供了三种取消选中radio的方式,代码示例如下: 本文依赖于jQuery,其中第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DO ...