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. 【Unity Shaders】游戏性和画面特效——创建一个夜视效果的画面特效

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  2. Android列表视图ListView和ListActivity-android学习之旅（二十四）

    ListView简介 ListView是android中常用的一种控件,创建ListView有两种方式: 1.在xml中使用ListView控件创建. 2.使用activity继承ListActivi ...

  3. MySQL数据库入门笔记

    2 数据库入门 2.1引入 数据保存到内存: 优点: 1)读写非常快 缺点: 1)程序关闭导致数据丢失 数据保存到文件: 优点: 1)数据可以永久保存 缺点: 1)频繁地IO操作,效率不高! 2)数据 ...

  4. 关于Java的移位运算符

    /** * 测试移位运算符<br/> * "<<" 左移 : 右侧补0<br/> * ">>" 带符号右移 : ...

  5. UIScrollView&nbsp;UIPageViewControlle…

    1.UIScorollView    是ios中提供的滑动控件,用来解决当内容区域大于scorollView可视区域时,可以通过滑动的方式查看整个内容区域,UIScorollView 的滑动控件的基类 ...

  6. Ajax核心--XMLHttpRequest对象

    XMLHttpRequest 对象是AJAX功能的核心,学习XMLHttpRequest对象就先从创建XMLHttpRequest 对象开始,了解在不同的浏览器中创建XMLHttpRequest 对象 ...

  7. python模块 - 常用模块推荐

    http://blog.csdn.net/pipisorry/article/details/47185795 python常用模块 压缩字符 当谈起压缩时我们通常想到文件,比如ZIP结构.在Pyth ...

  8. Windows CE Notification API的使用方法

    1 引言      以Windows CE 为操作系统的掌上电脑(如PocketPC或HPC),除具备PC的功能外,还具备很强的自身控制能力.Windows CE API超越微软其他操作系统的 API ...

  9. 2015/12/24:嵌入式C语言的位操作随笔

    今晚是平安夜,首先祝大家平安夜快乐,明天是圣诞,祝大家圣诞快乐!!        好了,这周都特别有空,上班也非常轻松,基本就是看看内核驱动,学学安卓,没什么正事的开发活干.今晚,我们来总结一例在现实 ...

  10. Java-ServletConfig

    /** * * A servlet configuration object used by a servlet container * to pass information to a servle ...