jquery ajaxを使用してPHPスクリプトから返されたJSONにアクセスする

Question

私のプログラムは基本的に5つのラジオボタンから選択できるWebページです。私は別のボタンが選択されるたびに、Webアプリケーションがボタンの下の画像を変更できるようにしたい。

私の問題は、mysqlのデータにアクセスするPHPスクリプトからJSONを受け取った後、JSONのデコード段階に来ています。

$('#selection').change(function() { 
    var selected_value = $("input[name='kobegreat']:checked").val(); 

    $.ajax({ 
     url: "kobegreat.php", 
     data: {"name": selected_value}, 
     type: "GET", 
     dataType: "json", 

     success: function(json) { 
      var $imgEl = $("img"); 
      if($imgEl.length === 0) { 
       $imgEl = $(document.createElement("img")); 
       $imgEl.insertAfter('h3'); 
       $imgEl.attr("width", "300px"); 
       $imgEl.attr("alt", "kobepic"); 
      } 
      var link = json.link + ".jpg"; 
      $imgEl.attr('src', link); 
      alert("AJAX was a success"); 
     }, 
     cache: false 
    }); 
}); 

そして、私のPHPファイル：

<?php 


    $db_user = 'test'; 
    $db_pass = 'test1';  

    if($_SERVER['REQUEST_METHOD'] == "GET") { 
     $value = filter_input(INPUT_GET, "name"); 
    } 

    try { 
     $conn = new PDO('mysql: host=localhost; dbname=kobe', $db_user, $db_pass); 
     $conn->setAttribute(PDO:: ATTR_ERRMODE, PDO:: ERRMODE_EXCEPTION); 
     $stmt = $conn->prepare('SELECT * FROM greatshots WHERE name = :name'); 
     do_search($stmt, $value); 
    } catch (PDOException $e) { 
     echo 'ERROR', $e->getMessage(); 
    } 

    function do_search ($stmt, $name) { 
     $stmt->execute(['name'=>$name]); 

     if($row = $stmt->fetch()) { 
      $return = $row; 
      echo json_encode($return); 
     } else { 
      echo '<p>No match found</p>; 
     } 
    } 

?> 

は、ここで私がイメージに投稿しようとしています私のHTMLコードです

は、ここに私のajax.jsファイルのための私のコードです。

<h2>Select a Great Kobe Moment.</h2> 
<form id="selection" method="get"> 
    <input type="radio" name="kobegreat" value="kobe1" checked/>Kobe1 
    <input type="radio" name="kobegreat" value="kobe2"/>Kobe2 
    <input type="radio" name="kobegreat" value="kobe3"/>Kobe3 
</form> 

<div id="target"> 
    <h3>Great Kobe Moment!</h3> 
</div> 

そして、ここだ、私のデータベースは次のようになります。私は今、Webアプリケーションを実行するたびに、ページ上の画像の残りの部分は消え

greatshots(name, link) 

name   link 
------  -------- 
kobe1  images/kobe1 
kobe2  images/kobe2 
kobe3  images/kobe3 

と私はウォンを表示しようとしています画像表示されません。私は「AJAXは成功した」という警告を受け取りますが、アラート以外は何も出ません。私がどこでこれに間違っているのか分かりませんし、どんな助けも素晴らしいでしょう。

Answer 1

前述のとおり、JSON.parse(json);を使用してJSON応答を解析する必要があります。

また、あなたが特にシンプルなセットアップをdiv要素をターゲットにする必要があります $("#target").append('<img width="300px" src="' + link + '.png"/>');