Ajax get methode hulp
Ben begonnen om met de ajax functie te stoeien. Ik denk dat ik al redelijk opweg ben.
Echter werk onderstaande code nog niet. Ziet iemand wat ik nog fout doe of vergeten ben?
ajax.php
Code (php)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
//<![CDATA[
$(document).ready(function(){
$.ajax({
type: 'GET',
url: '/ajax.php',
data: { get_param: 'time' },
dataType: 'json',
success: function (data) {
$('#overlay, #ajaxmessage').fadeOut(function() {
$('#target').html(data.time).fadeIn();
});
}
}
});
});
//]]>
</script>
Groet Yoeri
//<![CDATA[
$(document).ready(function(){
$.ajax({
type: 'GET',
url: '/ajax.php',
data: { get_param: 'time' },
dataType: 'json',
success: function (data) {
$('#overlay, #ajaxmessage').fadeOut(function() {
$('#target').html(data.time).fadeIn();
});
}
}
});
});
//]]>
</script>
Groet Yoeri
Gewijzigd op 27/05/2015 19:27:01 door Yoeri Achterbergen
php/json
Code (php)
jquery/ajax
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
//<![CDATA[
$(document).ready(function(){
$.ajax({
type: 'GET',
url: '/ajax.php',
data: { get_param: 'time' },
dataType: 'json',
success: function (data) {
$('#result').html(data.time).fadeIn();
}
});
});
//]]>
</script>
//<![CDATA[
$(document).ready(function(){
$.ajax({
type: 'GET',
url: '/ajax.php',
data: { get_param: 'time' },
dataType: 'json',
success: function (data) {
$('#result').html(data.time).fadeIn();
}
});
});
//]]>
</script>
Als ik de php file aanroep in de browser handmatig krijg ik dit te zien:
Code (php)
1
{"time":"$time"}
Gewijzigd op 28/05/2015 19:16:41 door Yoeri Achterbergen
Tevens: de data parameter doet op dit moment (nog) niets. Omdat je type GET is zou je ook kunnen overwegen om ajax.php?get_param=time te gebruiken, als dat je bedoeling is? En get_param misschien een iets beter omschrijvende naam te geven.
En tot slot, je ajax.php kan wel wat korter, maar wellicht ga je deze nog uitbreiden?
Ik zal de slash eens weghalen, de ajax.php zit namelijk in de zelfde directory.
De php/json file is nu kort omdat ik de waardes er niet uit kreeg. Daardoor ben ik gaan kijken of ik dan teminste 1 waarde eruit kreeg, dat is dan de data "time".
De bedoeling is uit eindelijk dat via ajax verschillende dat word weer gegeven vanuit de json file.
Omdat ik pas bezig ben met ajax dacht ik de data simpel via get te kunnen krijgen.
Zijn er nog andere manieren dan achter de php file get_param=time te zetten zeker omdat er straks met meer data word gewerkt?
Thomas van den Heuvel op 28/05/2015 19:42:13:
Tevens: de data parameter doet op dit moment (nog) niets. Omdat je type GET is zou je ook kunnen overwegen om ajax.php?get_param=time te gebruiken, als dat je bedoeling is? En get_param misschien een iets beter omschrijvende naam te geven.
Jquery docs:
Quote:
data
Type: PlainObject or String or Array
Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests.
Type: PlainObject or String or Array
Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests.
Gewijzigd op 28/05/2015 21:23:02 door Ger van Steenderen
Beide werkt.
EDIT: ik bedoelde dat de data parameter geen effect had in het script van Yoeri :). In ajax.php wordt niets gedaan met $_GET['get_param'].
Gewijzigd op 28/05/2015 22:17:44 door Thomas van den Heuvel
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$('#form').submit(function(e) {
e.preventDefault();
// show loader
$('#target').fadeOut(function() {
$('#overlay, #ajaxMessage').fadeIn();
})
$.ajax({
'url': 'php/ajax.php',
'data': $('#form').serialize(),
'success': function(data) {
$('#overlay, #ajaxmessage').fadeOut(function() {
$('#target').html(data.cake).fadeIn();
});
}
});
});
e.preventDefault();
// show loader
$('#target').fadeOut(function() {
$('#overlay, #ajaxMessage').fadeIn();
})
$.ajax({
'url': 'php/ajax.php',
'data': $('#form').serialize(),
'success': function(data) {
$('#overlay, #ajaxmessage').fadeOut(function() {
$('#target').html(data.cake).fadeIn();
});
}
});
});
Hierin word waarde weggeschreven en komt terug met ajax.
Waarom kan ik dan niet gewoon het zelfde doen zonder waarde weg te schrijven maar alleen te krijgen ?
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<script>
//<![CDATA[
$.ajax({
'url': 'ajax.php',
'success': function(data) {
$('#result').html(data.time).fadeIn();
};
});
//]]>
</script>
//<![CDATA[
$.ajax({
'url': 'ajax.php',
'success': function(data) {
$('#result').html(data.time).fadeIn();
};
});
//]]>
</script>
- ik zou wel een (document) ready check uitvoeren, in het eerste script wordt de ajax call getriggerd als je je form submit en je document is dan meestal al geladen (maar het zou niet misstaan om ook dat ding in een document ready block te zetten)
- krijg je javascript foutmeldingen / netwerk fouten van scripts die niet gevonden kunnen worden?
- include je een jquery library?
- bestaat er een element met id result?
Het script wat je hierboven plaatst is zo triviaal dat je waarschijnlijk iets (heel) simpels vergeet... Je laat ons een beetje raden wat er mogelijk mis is... Toen ik hier een voorbeeld script van maakte werkte dit direct dus ik heb eigenlijk geen flauw idee wat je (fout) aan het doen bent.
Copypaste het volgende eens, kijk of dit werkt, en vergelijk het met je eigen code:
index.whatever
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
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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="result"></div>
<script>
//<![CDATA[
$().ready(function() {
$.ajax({
type: 'GET',
url: 'ajax.php',
// data en dataType hoef je niet eens op te geven...
success: function (data) {
$('#result').html(data.time).fadeIn();
}
});
});
//]]>
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="result"></div>
<script>
//<![CDATA[
$().ready(function() {
$.ajax({
type: 'GET',
url: 'ajax.php',
// data en dataType hoef je niet eens op te geven...
success: function (data) {
$('#result').html(data.time).fadeIn();
}
});
});
//]]>
</script>
</body>
</html>
ajax.php
Code (php)
Dit werkt gewoon -_-.
Gewijzigd op 28/05/2015 22:30:54 door Thomas van den Heuvel