Probleme mit jquery Ajax und einem PHP-Skript zum Abrufen von Daten aus mysql

Question

Ich habe Probleme mit meinem aktuellen Web-App-Projekt mit der Anzeige eines einfachen JPG-Bild basierend auf was Radiobutton mit jquery ajax mit einem PHP-Skript zur Kommunikation mit mysql überprüft .

Hier ist meine ajax.js Datei:

$('#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"); 
      } 
      $imgEl.attr('src', json["link"]); 
      alert("AJAX was a success"); 
     }, 
     cache: false 
    }); 
}); 

Und meine kobegreat.php Datei:

<?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-Code habe ich das Bild bin versucht anzuzeigen:

<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> 

Und schließlich ist meine Datenbank wie folgt eingerichtet:

greatshots(name, link) 

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

Ich weiß, dass der PHP-Skript erfolgreich die Schreibdaten aus der Datenbank greifen, weil alle, die Anzeige unter dem Ziel div ist, sind dies:

{"name":"kobe3","0":"kobe3","link":"images\/kobe3","1":"images\/kobe3"} 

Und ich weiß, dass die Ajax-Funktion Erfolg zurückkehrt, weil Der Alarm für eine erfolgreiche Ajax-Anfrage warnt mich, wenn ich eine Optionsschaltfläche auswähle. Also bin ich mir nicht sicher, wo ich falsch liege oder wie ich mein Problem lösen könnte.

Answer 1

$imgEl.attr('src', json["link"]); 

sollte

$imgEl.attr('src', data.link); 

Answer 2

Sie haben $imgEl.attr('src', json["link"]); und var name in Funktionsdaten, versuchen $imgEl.attr('src', data.link);

Answer 3

1 sein. Änderung $imgEl.attr('src', json["link"]); zu $imgEl.attr('src', data.link);

2. Hängen Sie das Bild an Ihr DOM an, indem Sie den folgenden Code einfügen, nachdem Sie dem Bildelement eine Quelle zugewiesen haben (über dem Code).

document.getElementById('target').appendChild($imgEl); 

Unter der Annahme, Ziel div id zu sein, wo Sie Bild angezeigt werden sollen.