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. (NO.00004)iOS实现打砖块游戏(八):游戏中小球与砖块的碰撞

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 现在回到GameScene.m中,我们所有的碰撞处理就放在该类中 ...

  2. Qualcomm平台camera调试移植入门

    1  camera基本代码架构 高通平台对于camera的代码组织,大体上还是遵循Android的框架:即上层应用和HAL层交互,高通平台在HAL层里面实现自己的一套管理策略:在kernel中实现se ...

  3. 关于android app签名文件获取sha1和MD值

    最近在做百度地图的嵌入,因为从同事接手的android app,所以第一次接触android的签名. 总的来说签名还比较简单,我用的是eclipse ADT自带的签名工具来做的签名,方法如下: 选择项 ...

  4. MariaDB存储引擎

    MariaDB存储引擎 存储引擎就是指表的类型.数据库的存储引擎决定了表在计算机中的存储方式.存储引擎的概念是MariaDB的特点,而且是一种插入式的存储引擎概念.这决定了MariaDB数据库中的表可 ...

  5. Dynamics CRM2013 ScLib::AccessCheckEx failed

    今天在系统中做某一操作的时候报如下截图错误,把错误日志下载下来,根据AccessRights这:ReadAccess一提示确定是对某一实体没有读的权限. 那怎样知道是哪个实体呢,再看上面错误日志中给出 ...

  6. Socket层实现系列 — I/O事件及其处理函数

    主要内容:Socket I/O事件的定义.I/O处理函数的实现. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd I/O事件定义 sock中定义了几个I/ ...

  7. UNIX环境高级编程——文件和目录

    一.获取文件/目录的属性信息 int stat(const char *path, struct stat *buf); int fstat(int fd, struct stat *buf); in ...

  8. foreach 内嵌的使用

    foreach内部处理数据流的每条记录,进行关系操作,最后用generate返回数据给外部.但注意关系操作符不能作用于表达式,要将表达式提取成关系. foreach内部只支持distinct, fil ...

  9. 【Android 系统开发】 Android 系统启动流程简介

    作者 : 万境绝尘 (octopus_truth@163.com) 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/3889548 ...

  10. 靠谱好用，ANDROID　SQLITE 增删查改

    布局文件main实现简单的功能: 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayo ...