在新窗口中显示POST AJAX响应

时间:2022-10-11 21:07:55

I send POST data through ajax using jQuery and it returns the binary data of a PDF file.

我使用jQuery通过ajax发送POST数据,它返回PDF文件的二进制数据。

I'd like to do something with this data. Either by providing a link to download, or opening it a new tab/window.

我想对这些数据做点什么。通过提供下载链接或打开新选项卡/窗口。

I know sending a user to a website and using GET variables would be easier but there is a lot of data that gets sent through and it needs to be post.

我知道将用户发送到网站并使用GET变量会更容易,但是有很多数据需要发送,需要发布。

Is there a way I can take the data that I retrieve and let a user download / see it somehow?

有没有办法可以获取我检索的数据并让用户以某种方式下载/查看它?

$("#export_pdf").click(function()
{
    var data_serialize = "v1=blah&var2=again&var3=more_info",
    url = "/actions/export-pdf";
    $.ajax({ 
        type: "POST",
        url: url,
        data: data_serialize,
        success: function(data)
        {   
            // data = PDF binary
            // I want to do something with this
        },error: function(data) { alert("error"); }
    });
});

1 个解决方案

#1


3  

I am assuming that you are able to retrieve the data and it is being stored in the data variable.

我假设您能够检索数据并将其存储在数据变量中。

You might try the following in your success function:

您可以在成功函数中尝试以下操作:

       //open a new window note:this is a popup so it may be blocked by your browser
       var newWindow = window.open("", "new window", "width=200, height=100");

       //write the data to the document of the newWindow
       newWindow.document.write(data);

Another option would be to dynamically create a div that is displayed using your success function in your $.ajax function.

另一种选择是动态创建一个div,使用$ .ajax函数中的success函数显示该div。

Here is a jsfiddle that will help you if you want to experiment with it:

这是一个jsfiddle,如果你想试验它将帮助你:

http://jsfiddle.net/larryjoelane/d8r3su0m/

http://jsfiddle.net/larryjoelane/d8r3su0m/

I have tested another way with the jquery $get function and it works for me. You just have to enable popups. here is the code I tested. I will attempt it with you ajax function when I get a chance.

我用jquery $ get函数测试了另一种方法,它对我有用。你只需要启用弹出窗口。这是我测试的代码。当我有机会的时候,我会尝试用你的ajax功能。

    $("#load_pdf").on("click",function(){


//swap url with a pdf file you have access to for testing
var url = "http://localhost/Responder Manual.pdf";


$.get(url,function(data){


       //open a new window note:this is a popup so it may be blocked by your browser
       var newWindow = window.open("", "new window", "width=200, height=100");

       //write the data to the document of the newWindow
       newWindow.document.write(data);


});

});

#1


3  

I am assuming that you are able to retrieve the data and it is being stored in the data variable.

我假设您能够检索数据并将其存储在数据变量中。

You might try the following in your success function:

您可以在成功函数中尝试以下操作:

       //open a new window note:this is a popup so it may be blocked by your browser
       var newWindow = window.open("", "new window", "width=200, height=100");

       //write the data to the document of the newWindow
       newWindow.document.write(data);

Another option would be to dynamically create a div that is displayed using your success function in your $.ajax function.

另一种选择是动态创建一个div,使用$ .ajax函数中的success函数显示该div。

Here is a jsfiddle that will help you if you want to experiment with it:

这是一个jsfiddle,如果你想试验它将帮助你:

http://jsfiddle.net/larryjoelane/d8r3su0m/

http://jsfiddle.net/larryjoelane/d8r3su0m/

I have tested another way with the jquery $get function and it works for me. You just have to enable popups. here is the code I tested. I will attempt it with you ajax function when I get a chance.

我用jquery $ get函数测试了另一种方法,它对我有用。你只需要启用弹出窗口。这是我测试的代码。当我有机会的时候,我会尝试用你的ajax功能。

    $("#load_pdf").on("click",function(){


//swap url with a pdf file you have access to for testing
var url = "http://localhost/Responder Manual.pdf";


$.get(url,function(data){


       //open a new window note:this is a popup so it may be blocked by your browser
       var newWindow = window.open("", "new window", "width=200, height=100");

       //write the data to the document of the newWindow
       newWindow.document.write(data);


});

});