如何阻止form.submit()将我重定向到另一个页面?

时间:2019-01-25 11:24:22

标签: javascript html

我正在构建Web应用程序,并且我需要对我个人没有访问权限的服务器发出某种形式的跨域POST请求。

我已经尝试了很多方法来使其与Ajax一起使用,但没有成功。我做了一些研究,最终找到了一个解决方案,该方案是使用表单创建一个不可见的iframe,然后提交所述表单以获取我需要的信息。

但是,此表单是用javascript创建的,因此我使用form.submit()方法提交了所述表单,这不仅是简单地将所需信息提供给我JSON文件,而且还会将我重定向到实际JSON文件位于另一个页面中。

如何防止这种情况发生?

    var ifr = document.createElement('iframe');
    var frm = document.createElement('form');
    frm.setAttribute("id", "invis_form");
    frm.setAttribute("action", endpoint);
    frm.setAttribute("method", "post");

    var x = document.createElement("INPUT");
    x.setAttribute("type", "text");
    x.setAttribute("name", "chave");
    x.setAttribute("value", apikey);

    var y = document.createElement("INPUT");
    y.setAttribute("type", "text");
    y.setAttribute("name", "valor");
    y.setAttribute("value", "125");

    frm.appendChild(x);
    frm.appendChild(y);

    ifr.appendChild(frm);
    document.body.appendChild(ifr);
    frm.submit();

我期望得到可以在控制台上打印的内容,而不是将其重定向到具有所需信息的JSON文件。

2 个答案:

答案 0 :(得分:2)

提交表单的行为会触发浏览器导航到HTTP请求返回的响应。

阻止它替换当前页面的唯一方法是使用target来使导航发生在其他位置(例如,在框架或新窗口中)…但是,跨域安全性将阻止您使用以下命令读取数据JavaScript。


出于同样的原因,您不能使用表单从远程站点读取数据you can't use Ajax to do it

该浏览器旨在阻止您的JavaScript 读取其他人的网站愿意与浏览器所有者共享的数据。

如果数据是公开的(即不需要用户登录,不在同一LAN上或类似的东西),则使用服务器端技术读取数据(可以将其代理到浏览器)。 / p>

答案 1 :(得分:0)

弄清楚,您可以将https://cors-anywhere.herokuapp.com/添加到端点,即使对Ajax请求也可以使用。

示例

var apikey = "my-api-key";
var cors = "https://cors-anywhere.herokuapp.com/";
var endpoint = "https://test/example";
$.ajax({
        type: "POST",
        url: cors + endpoint + "/create",
        crossDomain: true,
        dataType: 'json',
        data: {
            'chave': apikey,
            'valor': 125.00
        },

        success: function (data) {
            console.log(data);
        },
        error: function (error) {
            console.log(error);
        },

    });

这如何或为什么起作用?我不知道。