更新时间:2022-08-27 14:21:17
javascript的跨域get很容易搞 定,但是跨域post就有点复杂了,今天无意看到大牛“张宴”的文章:http://blog.s135.com/ajaxcdr/ ,思路很不错,转载于此(其实这个思路要是看懂了,也很容易借助silverlight实现)
最近的一个项目中,需要通过 JavaScript 提交表单数据到另一个域名下的PHP接口(因为数据较大,需要HTTP POST方式提交),并获取PHP接口的返回值,在页面无刷新、无跳转的情况下,更新div标签内的内容。<html> <head> <title>Ajax 跨域 HTTP POST/GET 访问请求演示:Ajax Cross Domain HTTP POST/GET Request Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> <!-- body,td,th { font-size: 14px; } --> </style> </head> <body> <form name="cross_domain_demo"> <table width="600" border="1"> <tr> <td colspan="2" align="center" valign="top"><strong>Ajax 跨域 HTTP POST/GET 访问请求演示(鼠标右键查看HTML源代码)</strong></td> </tr> <tr> <td colspan="2" align="center" valign="top">函数说明与下载地址:<a href="http://blog.s135.com/ajaxcdr/" target="_blank">http://blog.s135.com/ajaxcdr/</a></td> </tr> <tr> <td align="right" valign="top">username</td> <td><input name="title" type="text" value="用户名"></td> </tr> <tr> <td align="right" valign="top">password</td> <td><input name="password" type="password" value="123456"></td> </tr> <tr> <td align="right" valign="top">content</td> <td><textarea name="content" cols="58" rows="5">文本区域值</textarea></td> </tr> <tr> <td align="right" valign="top">city</td> <td> <select name="city"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="深圳">深圳</option> </select> </td> </tr> <tr> <td align="right" valign="top">interest</td> <td> <select name="interest[]" multiple> <option value="玩游戏">玩游戏</option> <option value="踢足球">踢足球</option> <option value="看书">看书</option> <option value="旅游">旅游</option> </select> </td> </tr> <tr> <td align="right" valign="top">gender</td> <td> <input type="radio" name="gender" value="男">男 <input type="radio" name="gender" value="女" >女 <input type="radio" name="gender" value="未知" checked>未知 </td> </tr> <tr> <td align="right" valign="top">grade</td> <td> <input type="checkbox" name="grade[]" value="等级一">等级一 <input type="checkbox" name="grade[]" value="等级二">等级二 <input type="checkbox" name="grade[]" value="等级三">等级三 <input type="checkbox" name="grade[]" value="等级四">等级四 </td> </tr> <tr> <td align="right" valign="top">publish</td> <td><input type="checkbox" name="publish" value="发布">发布</td> </tr> <tr> <td align="right" valign="top"> </td> <td> <a href="javascript:AjaxCrossDomainRequest('http://api.bz/ajaxcdr/echo.php', 'POST', 'cross_domain_demo', 'mycallback(\'参数①\', \'参数②\', myparam)');"><img src="post_button.gif" width="100" height="24" align="absmiddle" border="0"></a> <button onClick="AjaxCrossDomainRequest('http://api.bz/ajaxcdr/echo.php', 'GET', 'cross_domain_demo', 'mycallback(\'参数①\', \'参数②\', myparam)'); return false;">GET方式提交</button> </td> </tr> </table> </form> <table width="600" border="1"> <tr> <td>JavaScript POST/GET 跨域提交信息到:http://api.bz/ajaxcdr/echo.php (<a href="http://api.bz/ajaxcdr/echo.txt" target="_blank">源代码</a>) </td> </tr> <tr> <td><strong>api.bz服务器端返回信息:</strong></td> </tr> <tr> <td><div id="return_info"></div> </td> </tr> </table> <script type="text/javascript"> var myparam = "参数③"; function mycallback(param1, param2, param3){ //提示:AjaxCrossDomainResponse是一个全局变量,它的值为远程服务器的返回值。 document.getElementById('return_info').innerHTML = "<pre>" + param1 + param2 + param3 + "<BR>" + AjaxCrossDomainResponse + "</pre>"; } </script> <script type="text/javascript" src="/demo/ajaxcdr/ajaxcdr.js"></script> </body> </html>
杨过后记:张晏同学给我们带来了这么好的文章,白拿也不好意思,最后奉献一个aspx的demo吧,见http://files.cnblogs.com/yjmyzz/ajaxcdr_aspx_demo.7z