Comment appliquer le tri et le filtrage à l'aide d'Ajax Json en PHP & MySQL
Salut je suis un débutant, je suis en train de travailler sur le site du logiciel. j'ai construit toutes les pages et la mise en page pour le site c'était la partie facile fait à l'aide de HTML, CSS ET JAVASCRIPT seul, la seule chose qui reste est de faire de grandes catégories de pages pour les différents logiciels qui est dur pour moi.
je veux ajouter tri option sur catégorie des pages comme ça (Voir Ici)
où l'utilisateur doit être la possibilité de trier selon la date, le nom, la date, etc. et aussi être en mesure de contrôler nombre max de logiciel pour afficher comme 20, 30, 100, etc.
Sur ma Page HTML j'ai ces div à l' dans laquelle je veux afficher les données (différents logiciels)
de de base de données MySQL "security_software" (c'est une base de données de test) à partir de table "internet_security" (c'est une table d'essai)
HTML Div à l'
<div class="category-container"> <div class="category-image"></div> <div class="category-desc"><a href="#">#</a><p>text</p></div> <div class="rating5" >Editors' rating: </div> <div class="category-download-btn"><a href="#">Download</a></div> <div class="category-buy-btn"><a href="#">Buy</a></div> </div>
Après Quelques recherches, j'ai eu la solution à utiliser JSON, AJAX PHP &MySQL
Code JAVASCRIPT que j'ai
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$.ajax({
url: 'ajax.php',
dataType: 'json',
success: function(response){
data = '';
$.each(response,function(i,val){
data = '<div class="category-image">'+val.image+'</div>'+
'<div class="category-link"><a href="#">'+val.id+'</a></div>'+
'<div class="category-desc"><p>'+val.description+'</p> </div>'+
'<div class="rating5" >'+val.rating+'</div>'+
'<div class="category-download-btn"><a href="'+val.download+'">Download</a></div>'+
'<div class="category-buy-btn"><a href="'+val.buy+'">Buy</a></div>';
$('<div>').attr('id',i).html(data).appendTo('#response');
});
}
});
</script>
</head>
<body>
<div id='response'></div>
</body>
Code PHP j'ai
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'root', '');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("security_software", $con);
$sql="SELECT * FROM internet_security ORDER by `".$q."` DESC" ;
$result = mysql_query($sql);
$response = array();
$i=0;
while($row = mysql_fetch_array($result))
{
$response[$i]['id'] =$row['id'];
$response[$i]['title'] = $row['title'];
$response[$i]['image'] = $row['image'];
$response[$i]['description'] = $row['description'];
$response[$i]['rating'] = $row['rating'];
$response[$i]['download'] = $row['download'];
$response[$i]['buy'] = $row['buy'];
$i++;
}
mysql_close($con);
echo json_encode($response);
?>
Maintenant, il ne fonctionne pas du tout comme je n'ai pas de place pour fixer ces codes (catégories déroulant) en javascript que j'ai.
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="id">id</option>
<option value="title">title</option>
<option value="image">image</option>
<option value="description">description</option>
<option value="description">rating</option>
<option value="download">download</option>
<option value="buy">buy</option>
</select>
</form>
S'il vous plaît aidez-moi les gars, où puis-je fixer ce code et comment le faire fonctionner, je suis totalement confus.
- Première règle de l'ajax est à faire du côté serveur de script (c'est à dire en PHP) de travail et de tester complètement avant de passer à consommer avec Javascript. Votre PHP ne fonctionnera pas parce que vous êtes à la commande par une chaîne pas un champ. Remplacer les guillemets simples avec des backticks et d'ajouter une case pour qu'il n'accepte une liste prédéfinie de noms de domaine pour éviter l'injection SQL. Quand vous avez ce travail, vous pouvez exclure le PHP et le débogage du Javascript.
- J'étais sur le point d'écrire une longue réponse, mais MrCode est correct. Vous devez vous assurer que vos téléspectateurs n'ont pas Javascript activé en premier, puis une fois que ça fonctionne, l'utilisation de Javascript pour l'améliorer.
- j'ai oublier d'ajouter les backticks merci pour le rappeler, mais il ne fonctionne pas.
- si vous pouvez me donner votre réponse ça sera une grande aide. comme je suis nouveau je comprendre un peu en retard les gars, vous avez juste à dire d'une manière qui va hors de ma tête
- Ce qui se passe lorsque vous accédez à
ajax.php?q=title
? - rien ne se passe, la page reste vide.
- Utilisation
error_reporting(E_ALL); ini_set('display_errors', '1')
et afficher le message d'erreur.
Vous devez vous connecter pour publier un commentaire.
Première chose à noter est que si vous allez pour afficher des données tabulaires... Utiliser une table! Il va rendre les choses beaucoup plus facile pour vous.
De l'autre. Construire votre code et de la table comme si l'Ajax n'existe pas. D'abord renseigner les données à l'aide de PHP sur la page d'affichage des données. Ensuite, raccorder l'en-tête de colonne pour les un lien vers votre page, mais le passage de la colonne que vous souhaitez trier par et aussi la direction.
c'est à dire
Le code ci-dessus serait aller à l'intérieur d'un seul fichier PHP, sans autre HTML, etc ... Ensuite, sur la page que vous souhaitez afficher ce tableau, il vous suffit de
<? include('path-to-file.php'); ?>
l'inclure.Enfin... En haut de la page à l'affichage de la table, vous pouvez mettre:
Le code ci-dessus serait alors de détecter une requête Ajax et servir à table avec les données dans le nouvel ordre.
Vous devez utiliser Javascript pour remplacer le tableau par le nouveau code HTML via
où
resp
est la variable qui contient votre réponse Ajax.Note: Ceci est juste une très simple et brut (oh, et non testé) façon de gérer la situation. Vous devez améliorer votre auto pour prévenir les problèmes de sécurité tels que l'Injection SQL.