[SQL + PHP + Jquery] POST dropdown value in SQL query - Softwareontwikkeling

maandag 10 februari 2014 23:53

Acties:

Verwijderd

Topicstarter

Allereerst wil ik melden dat ik een beginner ben met programmeren. Waarschijnlijk ben ik volledig op het verkeerde pad en zou graag advies willen op de volgende vraag:

Ik heb een dataset waaruit ik informatie wil oproepen vanuit een bepaalde kolom, genaamd Buurt. Deze SQL query wil ik dynamisch maken, zodat je met gebruik van een dropdown menu je elke keer een andere buurt kunt kiezen.

Dit is mijn PHP bestand waarin ik mijn query oproep en vertaal naar een JSON object, ik wil graag dat hij bij
.$_POST['dropdownbuurt'] de waarde plakt van mijn dropdown menu.

code:

<?php
@include ('../conn.php');

$query_dropdownbuurt = $db->prepare("SELECT Aantal, Naam, Buurt, Aantal FROM Voornamen WHERE Buurt = '".$_POST['dropdownbuurt']."' ORDER BY Aantal DESC LIMIT 5");

$params = array ();
$query_dropdownbuurt->execute($params);

$result = $query_dropdownbuurt->fetchAll (PDO::FETCH_ASSOC);

$jsonResult = json_encode($result);

echo $jsonResult;

?>

Dit is mijn Javascript bestand. Ik wil hier graag de data omzetten naar divs die zonder de pagina te reloaden laat zien dus met de .change functie. De change functie werkt prima en het omzetten van data naar divs ook maar ik heb geen idee wat ik moet doen om ervoor te zorgen dat de 'option selected' gePOST wordt in de sql query en die vervolgens de data ophaald die ik wil hebben.

code:

$.getJSON( "ajax/buurt.php", function( jsonData2 ) {    
        console.log( jsonData2 );
        
        $('#dropdownbuurt').change(function() {
        
            //$.each ( jsonData2, function(key,row) {
                //var Result= row ['Buurt'] + '' + row ['Naam'];
                //Result = Result.replace(/\'/g, "\\\'").replace(/\"/g, "\\\"");
        
                //var newResult=$('<div>');
                //newResult.text(Result);
                //newResult.appendTo($('body'));
            //});
            alert('test');
        });
        
    });

Voor extra informatie, dit is het HTML-bestand waarin ik het formulier heb met daarin het dropdown menu, nu heeft het een method="post" maar weet niet zeker of dit wel nodig is.

code:

<html>
    <head>
    <head>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="js/script.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
    </head>
    <body>
    
    
    <form method="post" action="#">
    <select name="dropdownbuurt" id="dropdownbuurt">
    </select>
    </form>
    </body>
</html>

dinsdag 11 februari 2014 00:21

Acties:

Verwijderd

Als je hier kijkt: http://api.jquery.com/jquery.getjson/
Zie je dat je als tweede argument aan de functie getJSON een data attribuut kan meegeven. Dit is in het formaat:

code:

1	var1=waarde&var2=waarde2

Probeer eerst eens een een waarde mee te geven aan de getJSON functie(hardcoded) en kijken of dat lukt. Kun je daarna met het dynamische gedeelte bezig.

dinsdag 11 februari 2014 12:00

Acties:

Verwijderd

Topicstarter

Goede tip, ik zal inderdaad eerst hardcoded de buurt toevoegen, maar ik kan vanuit de tekst op de pagina niet echt goed opmaken hoe ze een data attribuut meegeven aan de getJSON. Correspondeert dat dan ook met de $._POST in mij php bestand? En ik begrijp hoe ik variabele aan moet maken, moet dat perse aan elkaar met & zoals jouw voorbeeld 'var1=waarde&var2=waarde2'

dinsdag 11 februari 2014 17:55

Acties:

Verwijderd

Off topic, maar ik vind het toch belangrijk om je er even op te wijzen dat je je PDO prepare verkeerd gebruikt.

Direct de value in een query plaatsen kan voor een SQL injection zorgen. Kijk naar placeholders in de php documentatie.

[Toevoeging]

Code toevoegen met de mobiele weergave van Tweakers is niet te doen, vandaar de verwijzing naar de php handleiding.

Let er even op dat jQuery.getJSON() een GET request stuurt, geen POST.

Verander

JavaScript:

1	$.getJSON('ajax/buurt.php', function(jsonData2) { });

naar

JavaScript:

1	$.getJSON('ajax/buurt.php', { dropdownbuurt: 'vul buurt in' }, function(jsonData2) { });

En verander de $_POST in de PHP file naar $_GET, zie hieronder.

PHP:

$query_dropdownbuurt = $db->prepare("SELECT Aantal, Naam, Buurt, Aantal FROM Voornamen WHERE Buurt = :buurt ORDER BY Aantal DESC LIMIT 5");

$query_dropdownbuurt->bindParam(':buurt', $_GET['dropdownbuurt'], PDO::PARAM_STR);

$query_dropdownbuurt->execute();

$result = $query_dropdownbuurt->fetchAll(PDO::FETCH_ASSOC);

Even een nadere uitleg over de PHP file, ik neem aan dat je nieuw bent met PDO.

Met deze regel:

PHP:

1	$query_dropdownbuurt = $db->prepare("SELECT Aantal, Naam, Buurt, Aantal FROM Voornamen WHERE Buurt = '".$_POST['dropdownbuurt']."' ORDER BY Aantal DESC LIMIT 5");

ben je kwetsbaar voor een SQL Injection.

Als ik de waarde van $_POST['dropdownbuurt'] zet op

SQL:

1	'; DROP DATABASE `database_name`;--

dan heb ik jouw database verwijderd. Ik neem aan dat dat niet de bedoeling is.

Als je nou een placeholder gebruikt en de waarde later bind met PDO::bindParam() wordt de waarde meteen geëscaped. (Dit verklaard dat als je PDO gebruikt je niet kwetsbaar bent voor SQL Injecties, dit is niet waar als je geen prepared statements gebruikt of ze verkeerd gebruikt)

Hopelijk helpt dit.

[ Voor 91% gewijzigd door Verwijderd op 12-02-2014 09:13 . Reden: Nadere verklaring PDO ]

woensdag 12 februari 2014 22:50

Acties:

Verwijderd

Topicstarter

Super bedankt!
Het werkt nu met de volgende code:

code:

<?php

@include ('../conn.php');

$query_dropdownbuurt = $db->prepare("SELECT Aantal, Naam, Buurt, Aantal FROM Voornamen WHERE Buurt = :buurt ORDER BY Aantal DESC LIMIT 5");

$query_dropdownbuurt->bindParam(':buurt', $_GET['dropdownbuurt'], PDO::PARAM_STR);
$query_dropdownbuurt->execute();

$result = $query_dropdownbuurt->fetchAll (PDO::FETCH_ASSOC);


//vertaal $result naar een JSON object
$jsonResult = json_encode($result);

//stuur het JSON onbject terug naar Query
echo $jsonResult;

?>

code:

    $( "#menu" )
    .change(function(){
    var Buurt= $("#menu option:selected").text();
    
        $.getJSON( "ajax/buurt.php",  { dropdownbuurt: Buurt }, function(jsonData2) {    
            console.log( jsonData2 );
        
            $.each (jsonData2, function(key,row){
                var Buurt2= 'Buurt:' +' ' + row ['Buurt'] + ' ' + 'Naam:' + ' ' + row ['Naam'] + ' ' + 'Aantal:' + ' ' + row ['Aantal'] + '' ;
                var newResult=$('<p>');
                newResult.text(Buurt2);
                newResult.appendTo( "#result" );
            }); 
        
        });
    });

Het enige nadeel is dat wanneer ik een tweede keer een optie selecteer uit het dropdown menu, het resultaat zich niet vervangt en dus de resultaten zich blijven opsommen. Kan ik dit het beste oplossen met .replaceWith ?

donderdag 13 februari 2014 09:23

Acties:

Verwijderd

Kijk naar $(selector).empty()