Javascript 发送 href 而不点击？

Question

我不确定这是否可行。我有这样的链接

<a id="addCart" href="http://mydomain.foxycart.com/cart?name=test-product&price=10.00">Add to Cart</a>

此链接在单击时会将值发送到另一台服务器上的 json 购物车。

但是，我有一种情况需要使用此 href 链接发送类似的值但没有被点击。例如:

$('.name').each(function() {
    while (y < data.products.length-1) {
        if($(this).text() === data.products[x].name) {
            $('.price').eq(x).text(data.products[x].price);
            //href here!
        }
        x++;
        y++;
    }
    x=0;
    y=0;
});

我需要传递这个 href:

href="http://mydomain.foxycart.com/cart?value=true"

在//href 中!上面的部分，没有被点击。我希望我的请求有意义。有没有办法做到这一点？

谢谢

Answer 1

对您的问题的简短回答是是的，您可以做到。但是，它要求您在另一端具有访问权限，以便以接受跨站点请求的方式修改脚本。但是，您应该非常小心，因为这意味着许多安全风险。

可以这样做:

链接:

<a href="http://mydomain.foxycart.com/cart?value=true" id="send_without_click">There is a link</a>

Javascript/JQuery 代码:

$(document).ready(function () {
    var a_handler = "#send_without_click";
    var $a = $(a_handler);
    var a_url = $a.attr('href');
    $.ajax({
        type: 'POST',
        url: a_url,
        crossDomain: true,
        data: {
            href: a_url
        },
        beforeSend: function () {
            //Do something before send. If not just remove the "beforeSend" part...
        },
        success: function (responseData, textStatus, jqXHR) {
            //the responseData is what you will get as response from the server
            var value = responseData.someKey;
        },
        error: function (responseData, textStatus, errorThrown) {
            alert('POST failed.');
        }
    });
});

在服务器端，接收发布请求的页面必须定义一些 header 才能接收 AJAX 调用。这将允许您的脚本进行跨域 POST、GET 和 OPTIONS。这是一个 PHP 示例:

示例文件cart.php

switch ($_SERVER['HTTP_ORIGIN']) {
    case 'http://from.com': case 'https://from.com':
    header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);
    header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
    header('Access-Control-Max-Age: 1000');
    header('Access-Control-Allow-Headers: Content-Type');
    break;
}

以上所有内容将遵循以下顺序:

1. 浏览器向服务器发送一个OPTIONS 方法。这是浏览器的一项“安全”措施，用于查看服务器是否允许跨站点(任何允许服务器的)帖子/请求
2. 然后，如果请求来自“http://from.com”或“https://from.com”的安全形式，服务器将以“Access-Control-Allow-Origin”响应，告诉浏览器允许您 POST|GET|ORIGIN ".
3. 由于服务器没问题，浏览器将发出您要求的 POST 请求。

*注意事项

• 最好让您的客户端设置它发送的内容类型 - 因此您也需要允许这样做。
• 服务器每次操作会发出 2 个请求
• 安全隐患正在增加。 “Access-Control-Allow-Origin: *”有点危险。
• 这不适用于非常旧的浏览器，可能也不适用于移动浏览器。
• 始终返回上面的 header ，而不仅仅是 OPTION 请求。

编辑:

如果您知道网站(外部)正在使用 JSONP Ajax，我还找到了一种检索数据的方法。

//JSON format:
{"name":"stackoverflow","id":5}
//JSONP format:
func({"name":"stackoverflow","id":5});

如果您知道 example.com 正在提供看起来像 JSONP 的 JSON 文件，那么您可以使用这样的代码来检索它，即使您不在 example.com 上 域:

function func(json){
    alert(json.name);
}
var elm = document.createElement("script");
elm.setAttribute("type", "text/javascript");
elm.src = "http://example.com/jsonp";
document.body.appendChild(elm);