1

jquery と httprequest を使用して Web ページの画像を変更しようとしていますが、うまくいきませんでした... いろいろ調べた結果、助けを求めることにしました。コードは以下に貼り付けられ、最初にjson（うまく機能するもの）を要求してから、画像のscrを更新しようとしました...機能しませんでした。最終テストでは、マウスオーバーとマウスアウト機能を使用しましたが、うまく機能しませんでした。面白いことに、show や hide などの他のプロパティは正常に機能します。唯一の問題は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 アドレスを示すキー/値 {ip: "xxx.xxx.xxx.xxx"} のオブジェクト (データ) を返します。JSON 応答を取得するために使用するサービス Web サイトは次のとおりです。

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を読み込めません 。Origin http://www.sanbarcomputing.comは Access-Control-Allow-Origin で許可されていません。

これを修正する1つの方法（JSONPに変更する）について説明している良い投稿がありますが、サーバーはJSONPではなくJSONを返すため、どちらも機能しません（試しました）：

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 で次のエラーが発生します。

キャッチされていない SyntaxError: 予期しないトークン:

ChromeはJSONを関数として実行しようとしていると思うので、そうではありません。

必要に応じて、クロスドメインでこれを機能させるには、サーバーに変更を加える必要があると思います。

クロスドメインの問題に関する良い記事は次のとおりです。

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

于 2012-09-26T00:16:54.003 に答える