如果您只想使用$.ajax()
向自己的站点进行表单POST(例如模拟AJAX体验),那么您可以使用jQuery Form Plugin。但是,如果您需要向不同域或者使用不同协议(非安全的http:
页面发布到安全的https:
页面)的自己的域提交表单,则会遇到跨域脚本限制,这些限制无法仅通过jQuery解决(更多信息)。在这种情况下,您需要动用强大的工具:YQL。简而言之,YQL是一种具有类似SQL语法的Web抓取语言,允许您将整个互联网作为一个大表进行查询。就我而言,YQL现在是唯一[容易]的方法,如果您希望使用客户端JavaScript进行跨域表单POST。
更具体地说,您需要使用YQL的
Open Data Table,其中包含一个
Execute块来实现此目的。关于如何做到这一点的良好概述,请阅读文章“
使用YQL抓取需要POST数据的HTML文档”。幸运的是,YQL大师Christian Heilmann已经创建了一个
处理POST数据的Open Data Table。您可以在
YQL控制台上尝试使用Christian的“htmlpost”表。以下是YQL语法的详细说明:
select *
- 选择所有列,类似于SQL,但在这种情况下,列是查询返回的XML元素或JSON对象。在爬取网页的上下文中,这些“列”通常对应于HTML元素,因此如果只想检索页面标题,则应使用select head.title
。
from htmlpost
- 要查询的表;在这种情况下,使用“htmlpost”开放数据表(如果此表不适合您的需求,可以使用自定义表)。
url="..."
- 表单的action
URI。
postdata="..."
- 序列化的表单数据。
xpath="..."
- 您要包含在响应中的节点的XPath。这充当过滤机制,因此如果要仅包括<p>
标记,则应使用xpath="//p"
;要包括所有内容,应使用xpath="//*"
。
点击“测试”以执行YQL查询。一旦您对结果满意,请确保(1)单击“JSON”以将响应格式设置为JSON,以及(2)取消选中“诊断”,通过删除多余的诊断信息来最小化JSON负载的大小。最重要的是页面底部的URL - 这是您在$.ajax()
语句中使用的URL。
在这里,我将向您展示使用此示例表单通过YQL查询执行跨域表单POST的确切步骤:
<form id="form-post" action="https://www.example.com/add/member" method="post">
<input type="text" name="firstname">
<input type="text" name="lastname">
<button type="button" onclick="doSubmit()">Add Member</button>
</form>
你的JavaScript代码应该长这样:
function doSubmit() {
$.ajax({
url: '//query.yahooapis.com/v1/public/yql?q=select%20*%20from%20htmlpost%20where%0Aurl%3D%22' +
encodeURIComponent($('#form-post').attr('action')) + '%22%20%0Aand%20postdata%3D%22' +
encodeURIComponent($('#form-post').serialize()) +
'%22%20and%20xpath%3D%22%2F%2F*%22&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=',
dataType: 'json',
success: function(response) {
console.log(response);
}
});
}
url
字符串是从 YQL 控制台复制的查询 URL,除了表单编码的 action
URI 和序列化输入数据动态插入。
注意:在通过互联网传递敏感信息时,请注意安全性影响。确保您正在提交敏感信息的页面是安全的 (https:
) 并且 使用 TLS 1.x 而不是 SSL 3.0。
<iframe>
解决方案可能是唯一的选择。 - Nick Craver