Auto aanvullen obv postcode - jquery script gevraagd
Het script voor het opvragen van de postcode werkt, dat is deze:
$json = file_get_contents('http://postcode-api.nl/adres/'.$_GET['postcode'].'/');
$json = json_decode($json);
$json = $json[0];
if ($json->{'alternatief'}!=''){
$_POST["plaats"] = $json->{'alternatief'};
}else{
$_POST["plaats"] = $json->{'plaats'};
}
$_POST["adres1"] = $json->{'straat'};
als ik nu index.php?postcode=6035CD doe dan vult hij het automatisch in.
De vraag is hoe ik dit nu automatisch kan laten laden na het invullen van de postcode middels jquery?
Gewijzigd op 24/10/2012 10:51:26 door Roy Keijers
Ten eerste: we gaan de volledige JSON-string meesturen naar javascript. Javascript begrijpt JSON. Dit is een uitstekend formaat om verschillende gegevens in 1 keer als Ajax request te sturen. Eventueel kan je later wat filteren, zodat onnodige gegevens niet voor teveel trafiek zorgen.
postcode.php
Code (php)
1
2
3
4
5
2
3
4
5
<?php
$json = file_get_contents('http://postcode-api.nl/adres/' . $_POST['postcode'] . '/');
$json = json_decode($json);
echo $json;
?>
$json = file_get_contents('http://postcode-api.nl/adres/' . $_POST['postcode'] . '/');
$json = json_decode($json);
echo $json;
?>
index.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<form>
<input name="postcode">
<input name="plaats">
</form>
<div id="result"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
/**
* een soort autocomplete voor postcode.
*/
$(document).ready(function($) {
var delay = 500;
var t = null; // wordt een timer.
// elementen cachen
var postcode_input = $('input[name=postcode]');
var plaats_input = $('input[name=plaats]');
// events.
postcode_input.keyup(postcode_changed);
postcode_input.change(postcode_changed);
postcode_input.blur(postcode_changed);
/**
* Pas na een bepaalde tijd inactiviteit, wordt er actie ondernomen
* Dit is vrij gebruikelijk bij autocomplete ...
*/
function postcode_changed(e) {
if (t) {
clearTimeout(t);
}
t = setTimeout(postcode_get_data, delay);
}
/**
* JSON data ophalen bij "De Post"
*/
function postcode_get_data() {
$.ajax({
url: 'postcode.php',
type: 'POST',
data: {postcode: postcode_input.val()},
success: function(message) {
// deze functie moet nog worden aangepast, naar de specifieke noden ...
var data = eval(message)[0];
plaats_input.val(data.plaats);
postcode_input.val(data.postcode);
}
});
}
});
</script>
<input name="postcode">
<input name="plaats">
</form>
<div id="result"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
/**
* een soort autocomplete voor postcode.
*/
$(document).ready(function($) {
var delay = 500;
var t = null; // wordt een timer.
// elementen cachen
var postcode_input = $('input[name=postcode]');
var plaats_input = $('input[name=plaats]');
// events.
postcode_input.keyup(postcode_changed);
postcode_input.change(postcode_changed);
postcode_input.blur(postcode_changed);
/**
* Pas na een bepaalde tijd inactiviteit, wordt er actie ondernomen
* Dit is vrij gebruikelijk bij autocomplete ...
*/
function postcode_changed(e) {
if (t) {
clearTimeout(t);
}
t = setTimeout(postcode_get_data, delay);
}
/**
* JSON data ophalen bij "De Post"
*/
function postcode_get_data() {
$.ajax({
url: 'postcode.php',
type: 'POST',
data: {postcode: postcode_input.val()},
success: function(message) {
// deze functie moet nog worden aangepast, naar de specifieke noden ...
var data = eval(message)[0];
plaats_input.val(data.plaats);
postcode_input.val(data.postcode);
}
});
}
});
</script>
... moet dus nog verder worden uitgewerkt.
Gewijzigd op 24/10/2012 12:21:02 door Kris Peeters