Meerdere velden invullen met Ajax en PHP

Door Dorgaldir op vrijdag 5 april 2013 13:40 - Reacties (12)
Categorieën: Ajax, IT, Jquery, PHP, Views: 2.252

Met de standaard ajax scriptjes die ik tot hiertoe geschreven heb heb was het doel telkens maar in één html tag iets toe te voegen. Een <div>, een <p>, en dergelijke,...
Nu moest ik vandaag een textarea en een input text veld van inhoud laten veranderen vanuit één ajax call. Het heeft me even geduurd maar ik heb een oplossing gevonden en wilde die graag delen voor het geval andere mensen met dit probleem zitten.

Wat er gebeurd is eigenlijk simpel, zoals bij elke ajax call verzamel je je gegevens en die worden doorgestuurd naar je gekozen script, aldaar verwerk je ze zoals je gewoon bent maar voor het einde moet je je gegevens in een array zetten en de headers verzetten naar json
code:
1
header('Content-type: application/json');

en als je dan encodeerd als json dan kan je de json variabele gewoon gebruiken in je basisscript om de velden apart in te vullen.

Het is wat duidelijker met enkele lapjes code.


PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<select id="sloganchoise" name="sloganchoise" onchange="getslogan()" required>
<?php
  $ar_cat[1] = "cat 1";
  $ar_cat[2] = "cat 2";
  Foreach($ar_cat as $key => $value){
    if($key == $cat){
      echo "<option value=\"$key\" selected>$value</option>";
    }
    else{
      echo "<option value=\"$key\">$value</option>";
     }  
  }
?>
</select>

<textarea id="slogan" name="slogan" required rows="4" cols="45"><?php echo $slogan;?></textarea>

<input type="text" id="sloganurl" name="sloganurl" value="<?php echo $url;?>"/>



en die roept volgend script aan:


JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
function getslogan(){
            var cat = "cat=" + $('#sloganchoise option:selected').val();
            $.ajax({  
                type: "POST",
                url: 'get_slogan.php',  
                dataType: 'json',  
                data: cat,  
                success: function(response){  
                   $('#slogan').val(response['slogan']);
                   $('#sloganurl').val(response['url']);
                }
            });
        }




en als volgt heb je get_slogan.php

PHP:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php  
//Get records from DB matching $_POST['cat']; 

//Iterate results: 
$results = array(); 
if($resultset->num_rows > 0) {  
    while($row = $resultset->fetch_assoc()) {  
       array_push($results, $row); 
    }  
}  

// Return JSON result 
header('Content-type: application/json');  
echo json_encode(results);



Mocht mijn uitleg niet duidelijk zijn dan stel je maar vragen in de reacties en zal ik proberen mijn tekst te verduidelijken. ;)

edit:
1: Heb wegens opmerkingen in de reacties de sql-injection beveiliging toegevoegd.

edit:
2: heb code snippet vervangen door de versie van RobIII