是否可以将数据发布到 JsonP?还是所有数据都必须作为 GET 请求在查询字符串中传递?
我有很多数据需要发送到服务,跨域,而且太大而无法通过查询字符串发送
有什么办法可以解决这个问题?
是否可以将数据发布到 JsonP?还是所有数据都必须作为 GET 请求在查询字符串中传递?
我有很多数据需要发送到服务,跨域,而且太大而无法通过查询字符串发送
有什么办法可以解决这个问题?
如果需要跨域发送大量数据。我通常会创建一个服务,您可以分两步调用该服务:
首先客户端做一个 FORM 提交(允许跨域发布)。该服务将输入存储在服务器上的会话中(使用 GUID 作为键)。(客户端创建一个 GUID 并将其作为输入的一部分发送)
然后客户端执行正常的脚本注入 (JSONP) 作为参数,您使用与您在 FORM 帖子中使用的 GUID 相同的 GUID。该服务处理来自会话的输入并以正常的 JSONP 方式返回数据。在此之后,会话被销毁。
这当然取决于您编写服务器后端。
我知道这是严重的死灵法术,但我想我会使用 jQuery 发布我的 JSONP POST 实现,我已成功将其用于我的 JS 小部件(这用于客户注册和登录):
基本上,我使用的是 IFrame 方法,如已接受的答案中所建议。我正在做的不同之处是在发送请求后,我正在观察,如果可以使用计时器在 iframe 中访问表单。当无法访问表单时,表示请求已返回。然后,我使用一个普通的 JSONP 请求来查询操作的状态。
我希望有人觉得它有用。在 >=IE8、Chrome、FireFox 和 Safari 中测试。
function JSONPPostForm(form, postUrl, queryStatusUrl, queryStatusSuccessFunc, queryStatusData)
{
var tmpDiv = $('<div style="display: none;"></div>');
form.parent().append(tmpDiv);
var clonedForm = cloneForm(form);
var iframe = createIFrameWithContent(tmpDiv, clonedForm);
if (postUrl)
clonedForm.attr('action', postUrl);
var postToken = 'JSONPPOST_' + (new Date).getTime();
clonedForm.attr('id', postToken);
clonedForm.append('<input name="JSONPPOSTToken" value="'+postToken+'">');
clonedForm.attr('id', postToken );
clonedForm.submit();
var timerId;
var watchIFrameRedirectHelper = function()
{
if (watchIFrameRedirect(iframe, postToken ))
{
clearInterval(timerId);
tmpDiv.remove();
$.ajax({
url: queryStatusUrl,
data: queryStatusData,
dataType: "jsonp",
type: "GET",
success: queryStatusSuccessFunc
});
}
}
if (queryStatusUrl && queryStatusSuccessFunc)
timerId = setInterval(watchIFrameRedirectHelper, 200);
}
function createIFrameWithContent(parent, content)
{
var iframe = $('<iframe></iframe>');
parent.append(iframe);
if (!iframe.contents().find('body').length)
{
//For certain IE versions that do not create document content...
var doc = iframe.contents().get()[0];
doc.open();
doc.close();
}
iframe.contents().find('body').append(content);
return iframe;
}
function watchIFrameRedirect(iframe, formId)
{
try
{
if (iframe.contents().find('form[id="' + formId + '"]').length)
return false;
else
return true;
}
catch (err)
{
return true;
}
return false;
}
//This one clones only form, without other HTML markup
function cloneForm(form)
{
var clonedForm = $('<form></form>');
//Copy form attributes
$.each(form.get()[0].attributes, function(i, attr)
{
clonedForm.attr(attr.name, attr.value);
});
form.find('input, select, textarea').each(function()
{
clonedForm.append($(this).clone());
});
return clonedForm;
}
通常JSONP是通过<script>
在调用文档中添加标签来实现的,这样JSONP服务的URL就是“src”。浏览器通过 HTTP GET 事务获取脚本源。
现在,如果您的 JSONP 服务与您的调用页面在同一个域中,那么您可能可以通过一个简单的$.ajax()
调用拼凑一些东西。如果它不在同一个域中,那么我不确定这怎么可能。