données de réponse JSON

Question

Je suis un problème avec mon JSON récupéré les données s'il vous plaît passer par le code tout

Voici ma table MySQL:

mysql> select imgurl from images where family="shoes"; 
+-------------------------------+ 
| imgurl      | 
+-------------------------------+ 
| images/zara/shoes/thumbnail | 
| images/hermes/shoes/thumbnail | 
| images/hermes/shoes/thumbnail | 
| images/hermes/shoes/thumbnail | 
+-------------------------------+ 

de la table ci-dessus im récupérer l'image urls avec ce jQuery code:

$(document).ready(function() { 
    $('ul.sub_menu a').click(function() { 
      $('#sliderid, .prodcls').fadeOut(4000); 
       var txt = $(this).text(); 
       $.ajax({ 
        type: 'POST', 
        url: 'thegamer.php', 
        data: {send_txt: txt}, 
        datatype:'json', 
        success: function(data){ 
         $('#pgwrapid').html(data); 
        } 
     }); 
    }); 
}); 

Voici le code php qui obtient la demande de la ajax jQuery:

<?php 
//Credentials 
$server = "localhost"; 
$user = "root"; 
$db = "lemonx"; 

//Connect 
$link = mysql_connect($server, $user); 
//Select database 
mysql_select_db($db, $link); 

//Assemble query 
$family = mysql_real_escape_string($_REQUEST['send_txt'], $link); 
$query = "SELECT imgurl FROM images WHERE family='$family'"; 

//Query database 
$result = mysql_query($query, $link); 

//Output result, send back to ajax as var 'response' 

$imgurl=array(); 
$i=0; 
if(mysql_num_rows($result) > 0){ 
    //Fetch rows 
    while($row = mysql_fetch_array($result)){ 
     $imgurl[$i] = $row['imgurl']; 
     //echo $imgurl[$i]; 
     $i+=1; 
     } 
} 
echo json_encode($imgurl); 

?> 

Maintenant, ce qui se passe que c'est sortie au-dessous sélecteur jQuery:

$('#pgwrapid').html(data); 

SORTIE

["images\/zara\/shoes\/thumbnail","images\/hermes\/shoes\/thumbnail","images\/hermes\/shoes\/thumbnail"] 

Mes problèmes sont:

1. Pourquoi la barre oblique inverse ici?

2. Y at-il un code à boucle sur la sortie ci-dessus et extraire chaque chemin et l'insérer dans balise image comme ceci:

   $('#pgwrapid').append("<img src='"imagepath"' alt='Thumbnail'/>"); 
   

code

sera utile.

Answer 1

Les barres obliques sont censées s'échapper et sont valides conformément à la spécification http://json.org. Notez que même en utilisant simplement Firebug:

"images\/zara\/shoes\/thumbnail" 

est évaluée à:

"images/zara/shoes/thumbnail" 

... c'est donc rien à se préoccuper.

Oui, vous pouvez boucler chaque élément à l'aide d'une boucle for standard ou de la fonction Array.forEach disponible dans les navigateurs récents, et appeler simplement votre fonction d'ajout pour chaque vignette renvoyée dans le résultat.

Answer 2

Le data que vous recevez de votre code PHP est une chaîne contenant le JSON - et le PHP JSON échappe les barres obliques - ce qui est valide.

Vous devez décoder la chaîne de texte JSON donc, quelque chose comme changer

$('#pgwrapid').html(data); 

à

var listofshoes = JSON.parse(data); // note this the data you were having in .html(data) 
for (var i in listofshoes) { 
    $('#pgwrapid').append($("<p>").text(listofshoes[i])); 
} 

Et vous obtiendrez une liste des données ajoutées - pas beaucoup plus de travail à faire une image cliquable, mais vous savez quoi faire ensuite :-)

Answer 3

Votre appel ajax a deux erreurs:

- method: 'post' (instead of type: 'POST') 
- dataType: 'json' (instead of datatype:'json') 

Après cela, vous devriez vérifier la réponse.Et écrivez une boucle qui crée les éléments d'image où vous voulez.