1

我正在尝试使用 Greasemonkey 扩展照片库网站的可用性。
该网站为每个照片库都有一个缩略图，当您单击这些缩略图时，它们会打开自己的图库页面。

问题是该网站经常更新其画廊，我忘记了我查看的最后一个画廊（新画廊将旧画廊移到下一页）。我希望网站记住我访问过的画廊，并以不同的边框颜色显示它们。

使用 jQuery 在单击事件上更改它们的样式非常容易，但是希望将访问过的画廊 ID 保存到我的本地数据库中，以便在下次加载页面时读取它们并更改它们的样式。

这是我的邮政编码：

$(".user_gallery").each(function () {
    $(this).click(function () {
        $("p", this).attr("style", "background-color:yellow"); 

        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            url: "http://localhost:58364/SaveData.aspx/SaveUserGallery",
            data: "{'galleryID': '" + $("p", this).text() + "'}",
            success: function (data) {
                alert("true!");
            },
            error: function () {
                alert("Error calling the web service.");
            }
        });
    });
});

但这当然给了我跨域错误：

XMLHttpRequest 无法加载 .... Origin ... Access-Control-Allow-Origin 不允许。

我的服务器端代码只是一个.netWeb 方法，它在我的本地服务器上运行并将 galleryID 保存到我的 SQL 服务器数据库中。我是该照片库网站的成员，它在不同的域上运行。

我不是专家网络或 JS 程序员，所以我不知道如何解决这个问题。我怎样才能做到这一点？

4

1 回答 1

3

有两种方法可以处理这个问题。由于您控制自己的服务器，因此对您来说最简单的方法是在本地服务器上设置跨域资源共享 (CORS)标头。请参阅“我想为我的服务器添加 CORS 支持”。

但是，如果您不想这样做，或者在您不控制服务器的情况下，Greasemonkey 使用函数处理跨域GM_xmlhttpRequest()AJAX。

将脚本更改为：

// ==UserScript==
// @name     _YOUR_SCRIPT_NAME
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant    GM_xmlhttpRequest
// ==/UserScript==

$(".user_gallery").each ( function () {
    $(this).click ( function () {
        $("p", this).attr ("style", "background-color:yellow");

        GM_xmlhttpRequest ( {
            method:     "POST",
            url:        "http://localhost:58364/SaveData.aspx/SaveUserGallery",
            data:       "{'galleryID': '" + $("p", this).text () + "'}",
            headers:    {"Content-Type": "application/json"},
            onload:     function (response) {
                            alert ("true!");
                        },
            onerror:    function () {
                            alert ("Error calling the web service.");
                        }
        } );
    } );
} );


尽管我不建议在.each()类似的内部创建大量不同的匿名函数。（这是另一个问题的主题。）

于 2013-06-08T20:18:48.170 回答