将数据发布到JSONP

Question

将数据发布到JSONP是否有可能将数据发布到JSONP？还是所有数据都必须以GET请求的形式在查询字符串中传递？我有很多数据需要发送到服务，跨域，而且它太大了，无法通过querystring发送。有什么办法可以绕过这件事？

Answer 1

如果您需要跨域发送大量数据。我通常创建一个您可以分两个步骤调用的服务：

1. 首先，客户端进行表单提交(POST允许跨域)。服务将输入存储在服务器上的会话中(使用GUID作为键)。(客户端创建GUID并将其作为输入的一部分发送)

2. 然后，客户端执行一个普通脚本-Injection(JSONP)作为参数，您使用与表单POST中使用的相同的GUID。服务处理来自会话的输入，并以正常的JSONP-方式返回数据。在此之后，会话将被销毁。

当然，这依赖于您编写服务器后端。

Answer 2

我知道这是严重的亡灵，但我想我应该使用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 markupfunction 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;}