Algemene Ajax Functie?
Het is een tijd geleden dat ik hier ben geweest en ik hoop dat jullie mijn kunnen helpen met de volgende vraag.
Mijn site gebruikt the jquery lib en ik maak vaak gebruik van ajax post's :
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
$.ajax({
url : 'files/ajax.php',
type : 'post',
dataType : 'json',
data : {
var1 : 'val1',
var2 : 'val2',
var3 : 'val3'
},
success: function (response) {
// Do stuff
},
error: function (response) {
// Do stuff
}
});
url : 'files/ajax.php',
type : 'post',
dataType : 'json',
data : {
var1 : 'val1',
var2 : 'val2',
var3 : 'val3'
},
success: function (response) {
// Do stuff
},
error: function (response) {
// Do stuff
}
});
Nu neemt dit veel ruimte in beslag omdat ik dit soort methods zeker wel over 200 keer gebruik.
Mijn vraag is wat de beste method is om een functie te maken voor dit soort acties ?
Voorbeeld :
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function post(url, parameters) {
$.ajax({
url : url,
type : 'post',
dataType : 'json',
data : parameters,
success: function (response) {
return response;
},
error: function (response) {
return response;
}
});
}
var data = { 'var1' : 'val1', 'var2' : 'val2', 'var3' : 'val3' };
if (post('files/ajax.php', data) == 'response') {
// do stuff
}
$.ajax({
url : url,
type : 'post',
dataType : 'json',
data : parameters,
success: function (response) {
return response;
},
error: function (response) {
return response;
}
});
}
var data = { 'var1' : 'val1', 'var2' : 'val2', 'var3' : 'val3' };
if (post('files/ajax.php', data) == 'response') {
// do stuff
}
Alvast bedankt!
Gewijzigd op 27/11/2015 15:48:02 door Inter Kode
Wat je wel zou kunnen doen is je functionaliteit wat dynamischer maken zodat url en data instelbaar zijn (en niet hardcoded is) zodat je het als een "functie" (een herbruikbare eenheid code) kunt gebruiken, ik denk dat dit laatste jouw doel is, in plaats van die hele lap code elke keer opnieuw uitschrijven met een andere url / andere data? Dit heeft wel tot gevolg dat je de functionaliteit waarbinnen je de AJAX calls wilt gebruiken iets anders vorm zult moeten geven. Dit is een noodzakelijk compromis, want het alternatief is dus alle code asynchroon opzetten (of mogelijk zijn er nog andere manieren) maar dat is dus vrij bewerkelijk.
De eerste stap is het groeperen van functionaliteit in (JavaScript) objecten, hier kun je dan je AJAX calls in opnemen. Vergelijk dit met klassen en methoden in een object georienteerde aanpak.
Maar je zult ons wel een beetje op weg moeten helpen, zou je bijvoorbeeld een voorbeeld kunnen geven van welke dingen je doet met deze AJAX calls, dan kunnen we gaan nadenken hoe we deze in (herbruikbare) objecten kunnen gieten.
Ik heb een tijd terug een soort van autocomplete-functionaliteit gemaakt die gebruik maakt van AJAX calls om resultaten op te halen. Deze is gegoten in een object structuur dus ik kan meerdere objecten van deze "klasse" maken met een minimale hoeveelheid code:
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
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
var box = new autocompleteBox();
box.init({
'inputId': 'inputtest',
'boxId': 'boxtest',
'ajaxURL': '<?php echo $ajaxLink ?>',
'ajaxQueryStringVariable': 'q' // try "z" (obviously will not return any results)
});
var box2 = new autocompleteBox();
box2.init({'inputId': 'inputtest2', 'boxId': 'boxtest2', 'ajaxURL': '<?php echo $ajaxLink ?>'});
});
//]]>
</script>
//<![CDATA[
$().ready(function() {
var box = new autocompleteBox();
box.init({
'inputId': 'inputtest',
'boxId': 'boxtest',
'ajaxURL': '<?php echo $ajaxLink ?>',
'ajaxQueryStringVariable': 'q' // try "z" (obviously will not return any results)
});
var box2 = new autocompleteBox();
box2.init({'inputId': 'inputtest2', 'boxId': 'boxtest2', 'ajaxURL': '<?php echo $ajaxLink ?>'});
});
//]]>
</script>
Als je wilt kan ik hier (weer) een werkend voorbeeldje van maken, maar op dit moment is deze code een beetje achter geraakt op mijn andere code en is daardoor niet meer compatibel :).
Gewijzigd op 27/11/2015 16:37:49 door Thomas van den Heuvel
Gewijzigd op 27/11/2015 16:41:14 door Peter Louwer
Voorbeeld van een van mij post functies :
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php // Jquery
$.ajax({
url : 'api/login',
type : 'post',
dataType : 'json',
data : {
email : email,
password: password,
token : token
},
success: function (response) {
if(response.ret == 'success') {
location.reload();
} else {
alertMsg('#login_alert', 'danger', response.msg);
disableBtn('.submit', false);
}
}
});
?>
$.ajax({
url : 'api/login',
type : 'post',
dataType : 'json',
data : {
email : email,
password: password,
token : token
},
success: function (response) {
if(response.ret == 'success') {
location.reload();
} else {
alertMsg('#login_alert', 'danger', response.msg);
disableBtn('.submit', false);
}
}
});
?>
Gewijzigd op 27/11/2015 16:41:54 door Inter Kode
Peter Massije op 27/11/2015 16:40:51:
Volgens mij is dit niet mogelijk tenzij je een callback functie gebruikt.
Is de succes function niet een callback function?
Ass je gegevens vanuit een ajax call wilt bewaren, kan je een interval zetten, die kijkt of de variable die je wilt gebruiken de gewenste waarde heeft om de zoveel tijd, zoja, clearInterval en dan ga je verder.
Gewijzigd op 27/11/2015 16:50:42 door Randy vsf
Probleem is dat deze functie altijd postCallback variable gebruikt, ben er nog niet helemaal uit...
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php // Jquery
// Universal post function
function post(url, parameters) {
$.ajax({
url : url,
type : 'post',
dataType : 'json',
data : parameters,
success : postCallback,
error : postCallback
});
}
// Launch function
post('files/ajax.php', 'username=jack&password=dummy');
// Catch the response
var postCallback = function (response) {
console.log(response);
// Do something with it
}
?>
// Universal post function
function post(url, parameters) {
$.ajax({
url : url,
type : 'post',
dataType : 'json',
data : parameters,
success : postCallback,
error : postCallback
});
}
// Launch function
post('files/ajax.php', 'username=jack&password=dummy');
// Catch the response
var postCallback = function (response) {
console.log(response);
// Do something with it
}
?>
Toevoeging op 27/11/2015 17:03:33:
Of je zet async uit :-)
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php // Jquery
// Universal post function
function post(url, parameters) {
var response;
$.ajax({
url : url,
type : 'post',
dataType : 'json',
async : false,
data : parameters,
success : function (data) {
response = data;
},
error : function (data) {
response = data;
}
});
return response;
}
// Launch function
console.log(post('files/ajax.php', 'username=jack&password=dummy'));
?>
// Universal post function
function post(url, parameters) {
var response;
$.ajax({
url : url,
type : 'post',
dataType : 'json',
async : false,
data : parameters,
success : function (data) {
response = data;
},
error : function (data) {
response = data;
}
});
return response;
}
// Launch function
console.log(post('files/ajax.php', 'username=jack&password=dummy'));
?>
Gewijzigd op 27/11/2015 17:03:54 door Peter Louwer
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
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
<?php // JS
// Function
function post(url, data) {
var response;
$.ajax({
url : url,
type : 'post',
dataType : 'json',
async : false,
data : data,
success : function (data) {
response = data;
},
error : function (data) {
response = data;
}
});
return response;
}
// Build parameters
var data = 'email=' + email + '&password=' + password + '&token=' + token;
// Store function response
var response = post('api/login', data);
// php will return : {"ret":"success","msg":"Successfully logged in."}
// Do stuff
if(response.ret == 'success') {
location.reload();
} else {
alertMsg('#login_alert', 'danger', response.msg);
disableBtn('.submit', false);
}
?>
// Function
function post(url, data) {
var response;
$.ajax({
url : url,
type : 'post',
dataType : 'json',
async : false,
data : data,
success : function (data) {
response = data;
},
error : function (data) {
response = data;
}
});
return response;
}
// Build parameters
var data = 'email=' + email + '&password=' + password + '&token=' + token;
// Store function response
var response = post('api/login', data);
// php will return : {"ret":"success","msg":"Successfully logged in."}
// Do stuff
if(response.ret == 'success') {
location.reload();
} else {
alertMsg('#login_alert', 'danger', response.msg);
disableBtn('.submit', false);
}
?>
Verder kun je deze functionaliteit niet echt hergebruiken omdat je (op dit moment) in de globale scope werkt, het minste wat je zult moeten doen is de naam van de callback-functie instelbaar maken (hierbij zou je de naam kunnen prefixen met 'ajaxSuccessCallback' ofzo).
Het beste wat Inter Kode (op dit moment) kan doen is de variabele delen in zijn code identificeren en deze instelbaar maken via parameters van de universele (wrapper) functie.
EDIT: dit zou ik nog altijd verkiezen boven het uitzetten van async.
Gewijzigd op 27/11/2015 17:23:26 door Thomas van den Heuvel
Code (js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function post(url, parameters) {
return $.ajax({
url : url,
type : 'post',
dataType : 'json',
data : parameters
});
}
var data = { 'var1' : 'val1', 'var2' : 'val2', 'var3' : 'val3' };
post('files/ajax.php', data)
.done(function () {
// ... success!
})
.fail(function () {
// ... error :(
});
return $.ajax({
url : url,
type : 'post',
dataType : 'json',
data : parameters
});
}
var data = { 'var1' : 'val1', 'var2' : 'val2', 'var3' : 'val3' };
post('files/ajax.php', data)
.done(function () {
// ... success!
})
.fail(function () {
// ... error :(
});
Overigens zie je dat de functie niet zo heel veel doet (eigenlijk alleen het instellen van JSON en POST). Je kan dit praktisch versimpelen door jQuery.post() te gebruiken:
Code (js)
1
2
3
4
2
3
4
// ...
jQuery.post('files/ajax.php', data, function () {
// ... success!
}, 'json');
jQuery.post('files/ajax.php', data, function () {
// ... success!
}, 'json');
Gewijzigd op 27/11/2015 18:54:45 door Wouter J
Bedankt voor de support, zie voorbeeld :
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
<?php // Jquery
var data = 'email=' + email + '&password=' + password + '&token=' + token;
$.post('api/login', data, function (response) {
if(response.ret == 'success') {
location.reload();
} else {
alertMsg('#login_alert', 'danger', response.msg);
disableBtn('.submit', false);
}
}, 'json').fail(function (response) {
alertMsg('#login_alert', 'danger', 'Something went wrong!');
disableBtn('.submit', false);
});
?>
var data = 'email=' + email + '&password=' + password + '&token=' + token;
$.post('api/login', data, function (response) {
if(response.ret == 'success') {
location.reload();
} else {
alertMsg('#login_alert', 'danger', response.msg);
disableBtn('.submit', false);
}
}, 'json').fail(function (response) {
alertMsg('#login_alert', 'danger', 'Something went wrong!');
disableBtn('.submit', false);
});
?>
Klein vraagje nog, wat voor advies geven jullie om de parameters door te geven?
var data = { 'var1' : 'val1', 'var2' : 'val2', 'var3' : 'val3' };
var data = 'email=' + email + '&password=' + password + '&token=' + token;
Gewijzigd op 30/11/2015 09:23:21 door Inter Kode
Met de 2e bouw je een query string.
Dat werkt ook, maar dan kan je net zo goed een get versturen.
Gewijzigd op 30/11/2015 09:39:22 door Randy vsf