如何张贴到其他领域,并在javascript中获得结果html

How to post to other domain and get result html in javascript

本文关键字:javascript html 结果 并在 何张贴 其他      更新时间:2023-09-26

浏览器必须发送POST请求并从javascript接收结果html页面。服务器响应中没有Access-Control-Allow-Origin。

如果用户点击提交按钮,则返回响应属性。

尝试从javascript中使用:

        $.ajax('https://example.com', {
            data: 
                {
                    postkey: 'value'
                }
            method: 'POST',
            async: false
        })
            .done(function (data, textStatus, jqXHR) {
                alert(data);
            })
            .fail(function (xhr, textStatus, errorThrown) {
                alert(JSON.stringify(xhr));
            });

在chrome控制台返回异常:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:52216' is therefore not allowed access.

我也试过jsonp

        $.ajax('https://example.com', {
            data: 
                {
                    postkey: 'value'
                }
            method: 'POST',
            dataType: 'jsonp',
            async: false
        })
            .done(function (data, textStatus, jqXHR) {
                alert(data);
            })
            .fail(function (xhr, textStatus, errorThrown) {
                alert(JSON.stringify(xhr));
            });

在这种情况下,请求类型更改为GET, chrome控制台出现奇怪的错误:

Uncaught SyntaxError: Unexpected token <

Chrome开发工具显示,在这两种情况下,example.com服务器返回正确的html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="et">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="content-language" content="et">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
...

如何在客户端解决这个问题?我需要模拟点击表单提交按钮,并获得结果html页面。

使用Jquery、Bootstrap 3和Jquery UI。服务器端Apache使用Mono, mod_mono, asp.net MVC 4.6。

可以在服务器端创建MVC控制器,调用这样的请求并返回结果。我正在寻找一种方法,从浏览器做到这一点,没有额外的应用程序自己的服务器调用。

** Update **

从我如何通过JavaScript发送跨域POST请求?jcubic answer I found sample:

还有一种方法(使用html5的特性)。您可以使用代理iframe托管在另一个域中,您使用postMessage发送消息到该iframe,然后该iframe可以做POST请求(在同一域)和postMessage返回给父窗口。

父节点

var win = $('iframe')[0].contentWindow;
win.postMessage(JSON.stringify({url: "URL", data: {}}),"http://reciver.com");
function get(event) {
    if (event.origin === "http://reciver.com") {
        // event.data is response from POST
    }
}
if (window.addEventListener){
    addEventListener("message", get, false)
} else {
    attachEvent("onmessage", get)
}

iframe on reciver.com

function listener(event) {
    if (event.origin === "http://sender.com") {
        var data = JSON.parse(event.data);
        $.post(data.url, data.data, function(reponse) {
            window.parent.postMessage(reponse, "*");
        });
    }
}
// don't know if we can use jQuery here
if (window.addEventListener){
    addEventListener("message", listener, false)
} else {
    attachEvent("onmessage", listener)
}

这在http://www.ajax-cross-origin.com/how.html

中也有描述

这将工作在当前的浏览器,这是合理的吗?是否有一些通用的方法或插件来实现这个?

除非您拥有您要发布的域名,否则您将无法发布到与发起请求的域名不同的域名。

您可以使用AJAX并在PHP脚本端运行curl post