Question

我一直在尝试使用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>

Answer 1

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

Answer 2

我发现并遇到了一些问题，但最终得到了一些有效的代码：

<!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-＆gt; 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。来源http://www.sanbarcomputing.com不被允许访问控制允许来源。

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

stackoverflow: access-control-allow-origin-not-allowed-by

我相信你需要从服务器以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：意外的令牌：

因为我认为Chrome正在尝试将JSON作为一个函数执行，但事实并非如此。

我认为，如果您需要，可以对服务器进行更改以实现跨域工作。

这是一篇关于跨域问题的好文章：

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

在img标签上更改src，无法使其正常工作

2 个答案: