1

我一直在尝试使用 jquery 和 httprequest 更改网页中的图像，但没有任何运气......经过大量研究后，我决定寻求帮助。代码粘贴在下面，我首先尝试询问 json（什么工作正常），然后更新图像上的 scr ......没用。对于最终测试，我使用了鼠标悬停和鼠标移出功能，但效果不佳，有趣的是其他属性（如显示和隐藏）工作正常，唯一的问题是attr('scr','').

谢谢

<!DOCTYPE html>
<html>
<head>
<script src="..\js\jQuery.js"></script>
<script>
  $.getJSON("http://www.containernurseries.co.nz/json/jsonPlantDetails.php", 
  {plantSelected:"ARGYRANTHEMUM-POLLY"},
  function(data){
    $('#a1').attr('scr','data:image/jpg;base64,'+data.plantDetail.Image);
  });
  $(document).ready(function() {
    $('#a1').mouseover(function(e) {
      $('#a1'.attr('scr','http://www.containernurseries.co.nz/images/services.gif');
    }).mouseout(function(e) {
      $('#a1').attr('scr','http://www.containernurseries.co.nz/images/services.gif');
    });
  });
</script>
</head>

<body>
<img id="a1" src="http://www.containernurseries.co.nz/images/contacticon.gif" width="18" height="37"/>


</body>
</html>
4

2 回答 2

6

看起来像一个错字，scr应该是src在分配属性时a1

于 2012-09-25T00:21:46.007 回答
1

我发现并解决了几个问题，但最终得到了一些工作代码：

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<img id="a1" src="http://www.containernurseries.co.nz/images/contacticon.gif" width="18" height="37"/>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
    $.getJSON("http://ip.jsontest.com", null,
            function (data) {
                console.log(data)
            });
    $(document).ready(function () {
        ($('#a1')).mouseover(function (e) {
            ($('#a1').attr('src', 'http://www.containernurseries.co.nz/images/services.gif'));
        }).mouseout(function (e) {
                    ($('#a1')).attr('src', 'http://www.containernurseries.co.nz/images/contacticon.gif');
                });
    });
</script>
</body>
</html>

你可以在这里看到它的工作：

http://www.sanbarcomputing.com/flat/forumPosts/imgSrcType/imgSrcTypeNoComments.html

此代码使用名为“JSONTest”的服务来获取格式正确的 JSON 代码。这将返回一个键/值 {ip: "xxx.xxx.xxx.xxx"} 的对象（数据），它显示您的 IP 地址。这是我用来获取 JSON 响应的服务网站：

http://teamaqua.github.com/JSONTest/

要查看控制台日志输出，只需在浏览器中打开一个控制台（例如，按 F12 键，或打开 FireFox 的 FireBug 插件。深入对象以查看在控制台中正确格式化的键/值对。

我用 scr->src 错字修复和其他一些需要修复的东西修复了你的代码：

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<img id="a1" src="http://www.containernurseries.co.nz/images/contacticon.gif" width="18" height="37"/>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
    $.getJSON("http://www.containernurseries.co.nz/json/jsonPlantDetails.php",
            {plantSelected:"ARGYRANTHEMUM-POLLY"},
            function (data) {
                ($('#a1')).attr('src', 'data:image/jpg;base64,' + data.plantDetail.Image);
            });
    $(document).ready(function () {
        ($('#a1')).mouseover(function (e) {
            ($('#a1').attr('src', 'http://www.containernurseries.co.nz/images/services.gif'));
        }).mouseout(function (e) {
                    ($('#a1')).attr('src', 'http://www.containernurseries.co.nz/images/contacticon.gif');
                });
    });
</script>
</body>
</html>

你可以在这里看到它（可能）失败：

http://www.sanbarcomputing.com/flat/forumPosts/imgSrcType/imgSrcType.html

我在 Chrome 中收到一个跨域错误，它似乎在 IE 和 FireFox 中静默失败：

XMLHttpRequest 无法加载 http://www.containernurseries.co.nz/json/jsonPlantDetails.php?plantSelected=ARGYRANTHEMUM-POLLY。Access-Control-Allow-Origin 不允许来源http://www.sanbarcomputing.com 。

这是一篇很好的帖子，讨论了解决此问题的一种方法（将其更改为 JSONP），但由于您的服务器返回 JSON，而不是 JSONP，因此它也不起作用（我尝试过）：

stackoverflow：访问控制允许来源不允许由

我相信，您需要从服务器以 JSONP JavaScript 可执行函数的形式返回结果。要发送 JSONP 请求，您将更改此行：

$.getJSON("http://www.containernurseries.co.nz/json/jsonPlantDetails.php",

对此：

$.getJSON("http://www.containernurseries.co.nz/json/jsonPlantDetails.php?callback=?",

然后，jQuery 会自动为您生成 JSONP 请求。它可以工作，但由于结果不是可执行的 JavaScript，因此在 Chrome 中会出现以下错误：

Uncaught SyntaxError: Unexpected token :

Since I think Chrome is trying to execute the JSON as a function, which it is not.

Changes need to be made to the server, I believe, to get this working cross-domain, if you need that.

Here is a good article on cross-domain issues:

https://developer.mozilla.org/en-US/docs/HTTP_access_control

于 2012-09-26T00:16:54.003 回答