Algemene Ajax Functie?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Full Stack .NET ontwikkelaar

Als ontwikkelaar werk je in een Agile-Scrum team van ICT specialisten aan nieuwe software. Je bent in staat om zelfstandig ontwerpkeuzes te maken waar het kan, maar je herkent ook de vraagstukken of keuzes die nader moeten worden uitgewerkt samen met de architect of klant. De software die je ontwikkelt is veilig, gedocumenteerd, beheerbaar en begrijpelijk voor de ontwikkelaars en beheerders aan wie je je werk overdraagt.Voor deze opdracht wordt er vooral ontwikkeld binnen C# / .NET (Core) met Javascript frameworks zoals Angular. Taken en werkzaamheden: interpreteren van ontwerpen programmeren schrijven van release scripts signaleren van keuzes en vraagstukken snel

Bekijk vacature »

Junior C# Webdeveloper

Organisatie Voor een van Phind’s businesspartners ben ik op zoek naar een Junior C# .NET ontwikkelaar. Het betreft een bedrijf uit Rotterdam, waar met 25 FTE hard wordt gewerkt aan webapplicatie. De software die hier wordt ontwikkelt legt de koppeling tussen reserveringssystemen van hotels en grote hotelboekingssites. Het bedrijf is ongeveer 25 jaar oud en zijn door hun unieke werkwijze en complexe software uitgegroeid tot marktleider in hun niche. Dit gebeurt allemaal met 6 developers. Vijf van die developers zijn back-end developers en een van de zes is een front-end developer/designer. In dit team verschilt het ervaringsniveau enorm. De gemiddelde

Bekijk vacature »

Oracle SOA-OSB Developer

Ben jij een ervaren Oracle SOA-OSB Developer? Ben jij een gedreven Oracle SOA-OSB developer met ambitie en minimaal 2 jaar ervaring als integratie specialist bij klanten en wil je werken binnen complexe (internationale) opdrachten bij Capgemini? Dan hebben wij een passende vacature voor jou! Integratie is het hart in alle projecten. Als Oracle SOA – OSB developer ben jij onderdeel van dat hart en zorg je dat binnen Oracle implementaties integraties zo efficiënt en onderhoudbaar moegelijk worden gerealiseerd. Je werkt op een prettige manier samen in teams met ervaren professionals van Capgemini middel SCRUM/Agile. Met jouw specialistische integratie kennis voeg

Bekijk vacature »

Stage Web Developer

Stagiair(e) PHP/Symfony Developer "Ben jij een leergierige student met een oog voor detail? Krijg jij energie van uitdagende webapplicaties en wil je graag in een jong en hecht team werken? Dan nodigen we je graag uit voor een kennismakingsgesprek in Nieuwkuijk!" Pascal Joore, Directeur/Eigenaar WETALENT In het kort Bij WETALENT hebben we een leuke stage beschikbaar voor een PHP/Symfony Developer. In deze rol ga je je voornamelijk bezig houden met het ontwikkelen van onze interne WETALENT back-end applicatie. WETALENT is een jong en modern bedrijf met een informele bedrijfscultuur. Je komt in een hecht team terecht met collega’s die je

Bekijk vacature »

Magento Developer

Het Digital Excellence Center van Saint-Gobain bestaat uit een gepassioneerd development en marketing team die samen de afdeling E-Business vormen. Gezamenlijk werken zij aan het ontwerpen, ontwikkelen en onderhouden van state-of-the-art digitale oplossingen zodat onze klanten eenvoudiger zaken met ons kunnen doen. Als Magento developer ben je onderdeel van het development team en breng je efficiëntie en innovatie binnen onze IT afdeling naar the next level! Beeld bij de baan van Magento Developer Je wordt onderdeel van onze B2C afdeling en werkt nauw samen met onze e-commerce manager en online marketeer. Deze tak binnen Saint-Gobain Distribution bestaat nu een half

Bekijk vacature »

C#/Unity3D Developer met een passie voor games gez

Bedrijf Dit bedrijf onderscheid zich al een hele tijd op het gebied van serious games. Momenteel hebben zij meerdere vestigingen en groeien de projecten met de dag, ondertussen hebben zij 30 medewerkers. Ook zijn zij een grote speler in meerdere landen. Het voordeel is dat het bedrijf blijft groeien en investeren zij in hun medewerkers zodat ze meegroeien. Ook wordt het zeer gewaardeerd als je met individuele inbreng komt, omdat bij hun jezelf ontwikkelen en kennis delen voorop staat. Het plan is om volgend jaar ook uit te breiden op het gebied van Virtual Reality, om demo’s te geven aan

Bekijk vacature »

Client-side developer vacancy, building well archi

Client-side developer vacancy, building well architected Web Apps with a great User Experience! The company: For our client, a small company working for huge e-commerce parties we are looking for a medior or senior level developer focusing on Front-end development. Nowadays, more than 50% of e-commerce is taking place on mobile devices. To help them deliver a great user experience this company created a platform that is focusing on mobile e-commerce. They created a way to build a high-quality native retail app based on the existing look & feel. Because they always want to push to the limits in ways

Bekijk vacature »

Ambitieuze junior Front end Developer gezocht voor

Deze innovatieve club in opereert vanuit een nieuw pand vlak bij het water. Inmiddels zijn zij al meer als 20 jaar actief in het ontwikkelen van software die veel word gebruikt in contactcenters. Denk hierbij aan callcenters, of bijvoorbeeld grote organisaties waar de communicatie intern erg belangrijk is. Vanwege het hoofdproduct wat al jaren een succes is telt de organisatie niet erg veel werknemers. Er werken nu namelijk 6 enthousiaste mensen die de lading kunnen dekken. Al gaat dit nu erg goed zijn ze toch opzoek naar een of in de loop van het jaar zelfs twee extra krachten. Binnen

Bekijk vacature »

PHP Frontend Developer

Het Digital Excellence Center van Saint-Gobain bestaat uit een gepassioneerd development en marketing team die samen de afdeling E-Business vormen. Gezamenlijk werken zij aan het ontwerpen, ontwikkelen en onderhouden van state-of-the-art digitale oplossingen zodat onze klanten eenvoudiger zaken met ons kunnen doen. Als PHP frontend developer ben je onderdeel van het development team en breng je efficiëntie en innovatie binnen onze IT afdeling naar the next level! Beeld bij de baan van PHP Frontend Developer Benieuwd over welke digitale oplossingen jij je hersenen zoal zal kraken? Dat zijn e-commerce websites, web portals, mobile apps, websites voor klanten, configuratie- en calculatietools

Bekijk vacature »

Mobile App Developer

Mobile App Developer Jij zorgt voor apps in de zorg Locatie: Amsterdam Niveau: HBO / WO Dienstverband: 40 uur Heb jij passie voor app development? Werk je graag met de nieuwste technieken én ben je creatief?Ons ontwikkelteam Mobile Appin Amsterdam zoekt een fanatieke collega. Jouw baan Spannende tijden zijn aangebroken voor jou en je collega’s. De eerste Mobile App is ‘live’ en de volgende is al in de maak. Daarbij kunnen we jouw kennis en ervaring goed gebruiken. Door jouw hands-on mentaliteit, eigenwijsheid en technisch inzicht kun je nauwkeurig herbruikbare software schrijven. Die software sluit naadloos aan op onze ‘backend’,

Bekijk vacature »

Ervaren PHP Developer die startups en multinationa

Organisatie Veel detachering organisaties denken vanuit uit belang van hun klanten en kijken welke consultants daar goed op passen. Wat deze organisatie onderscheid is dat ze met jou gaan kijken waar je goed in bent, waar je je in wilt gaan ontwikkelen en wat je interesses zijn. Op basis daarvan worden de klanten geselecteerd waarvan je voor een periode van minimaal 3 maanden mee gaat draaien in het team. Dit kan zijn in een rol als medior, senior, lead developer of architect. Hierbij krijg je de kans om jezelf te ontwikkelen binnen allerlei grote bekende organisaties. Omdat deze detacheringclub met

Bekijk vacature »

WO afgestudeerd en de ambitie om Fullstack Develop

Ben jij WO afgestudeerd? En sta jij aan de start van jouw carrière? Met dit traineeship ben je in ieder geval verzekerd van een hele goede start van jouw carrière! Over de functie Wil jij betrokken zijn bij het ontwikkelen van de nieuwe state-of-the-art web apps voor deze luchtvaartmaatschappij? Met dit traineeship maak je hier deel van uit en wordt jou het beste van twee werelden geboden: Enerzijds de innovatieve leerzame IT omgeving van een multinational zoals deze en anderzijds de persoonlijke coaching-/ en ontwikkeling. * Om jou een idee te geven hoe innovatief en groots deze organisatie is en

Bekijk vacature »

GIS Developer - Utrecht

Functieomschrijving Wil jij je GIS kennis toepassen in het maken van software voor grote marktpartijen en overheidsinstellingen? Zoek jij een nieuwe uitdaging en heb jij ervaring met GIS? Reageer dan nu! Ontwikkelen van geografische (GIS) applicaties- en software; Beheer en onderhoud van GIS applicaties; Koppelen, leveren en implementeren van GIS applicaties aan bestaande applicaties van klanten; Flexibel en vernieuwend werken binnen een innoverend bedrijf. Functie-eisen Afgeronde HBO opleiding; Kennis van GIS is een eis; Kennis van GIS programmeertalen is een eis. Bedrijfsomschrijving Het bedrijf waar je komt te werken is een flexibel en vernieuwend bedrijf, dat al 15 jaar innoverend

Bekijk vacature »

Medior .Net developer logistiek tech conferences

Medior .Net developer logistiek tech conferences Wat ga je doen als Medior .Net developer? Jij gaat als medior .Net developer in Amsterdam werken bij een bedrijf dat is gespecialiseerd is in de organisatie van magazijnbeheer. Jij gaat werken aan een softwarepakket dat grote bedrijven als Bol.com en Amazon helpt om hun producten zo efficiënt mogelijk te organiseren in het magazijn om te zorgen dat de klant zijn bestelling op tijd ontvangt. De software waar jij aan zal werken wordt gerealiseerd met behulp van .Net, C#, MVC en Javascript in een team van 15 enthousiaste .Net developers. Wat wordt jou geboden?

Bekijk vacature »

Junior C# developer in multimediabranche

Organisatie Deze organisatie is gevestigd in de omgeving van Den Bosch. Deze organisatie is de ideale partner voor bedrijven die behoefte hebben aan grafische oplossingen. Denk hierbij aan drukwerk als posters, flyers en banners. Er zijn applicatie gemaakt voor klanten om hun bestellingen online in te voeren zodat orders geheel automatisch gegenereerd kunnen worden. Daarnaast is deze organisatie volop bezig met de ontwikkeling van maatwerk software voor hun klanten. Zo hebben ze bepaalde portalen ontwikkeld voor diverse grote supermarkten. Er werken meer dan 25 medewerkers bij deze organisatie. Het is een erg open cultuur waar iedereen makkelijk aanspreekbaar is. De

Bekijk vacature »
Inter Kode

Inter Kode

27/11/2015 15:46:40
Quote Anchor link
Hallo allemaal,

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)
PHP script in nieuw venster Selecteer het PHP script
1
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
  }
});


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)
PHP script in nieuw venster Selecteer het PHP script
1
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
}

Alvast bedankt!
Gewijzigd op 27/11/2015 15:48:02 door Inter Kode
 
PHP hulp

PHP hulp

18/10/2018 01:53:53
 
Thomas van den Heuvel

Thomas van den Heuvel

27/11/2015 16:35:11
Quote Anchor link
Ik denk dat dat op de hierboven voorstelde manier niet gaat werken. Een AJAX call is namelijk asynchroon als ik mij niet vergis (dit betekent kort door de bocht "wacht niet op antwoord"), daarom kun je in je callback geen waarde retourneren tenzij je op een of andere manier forceert dat er op het antwoord wordt gewacht, maar dat blokkeert dan je hele applicatie (wat je waarschijnlijk niet wilt). Als je het bovenstaande wilt laten werken zal je hele code "stack" asynchroon moeten zijn denk ik.

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)
PHP script in nieuw venster Selecteer het PHP script
1
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>

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
 
Peter Louwer

Peter Louwer

27/11/2015 16:40:51
Quote Anchor link
Volgens mij is dit niet mogelijk tenzij je een callback functie gebruikt.
Gewijzigd op 27/11/2015 16:41:14 door Peter Louwer
 
Inter Kode

Inter Kode

27/11/2015 16:41:39
Quote Anchor link
Bedankt voor je reactie, wat bedoel je met een callback?

Voorbeeld van een van mij post functies :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
    }
  }
});


?>
Gewijzigd op 27/11/2015 16:41:54 door Inter Kode
 
Randy vsf

Randy vsf

27/11/2015 16:46:16
Quote Anchor link
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
 
Peter Louwer

Peter Louwer

27/11/2015 16:47:41
Quote Anchor link
Niet getest, maar zoiets :
Probleem is dat deze functie altijd postCallback variable gebruikt, ben er nog niet helemaal uit...

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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
}

?>


Toevoeging op 27/11/2015 17:03:33:

Of je zet async uit :-)

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<?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'));

?>
Gewijzigd op 27/11/2015 17:03:54 door Peter Louwer
 
Inter Kode

Inter Kode

27/11/2015 17:13:45
Quote Anchor link
Thanks, eind resultaat :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<?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);
}


?>
 
Thomas van den Heuvel

Thomas van den Heuvel

27/11/2015 17:21:30
Quote Anchor link
Het bovenstaande voorbeeld (een loginfunctionaliteit via AJAX) is geschreven voor een specifiek doel en zal ook op een specifieke manier werken, hier maak je niet meerdere "instanties" van.

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
 
Wouter J

Wouter J

27/11/2015 18:54:31
Quote Anchor link
Ik zou async inderdaad niet uitzetten. De oplossing is gegeven door jQuery zelf doordat `jQuery.ajax()` een jqXHR object retourneerd: http://api.jquery.com/jQuery.ajax/#jqXHR

Code (js)
PHP script in nieuw venster Selecteer het PHP script
1
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 :(
    });


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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
// ...
jQuery.post('files/ajax.php', data, function () {
    // ... success!
}, 'json');
Gewijzigd op 27/11/2015 18:54:45 door Wouter J
 
Inter Kode

Inter Kode

30/11/2015 09:21:35
Quote Anchor link
Na Wouter J reactie ben ik toch jquery post functie gaan gebruiken.
Bedankt voor de support, zie voorbeeld :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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);
});


?>


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
 
Randy vsf

Randy vsf

30/11/2015 09:34:41
Quote Anchor link
Ik zou de eerste gebruiken als je POST wil gebruiken.
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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.