login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Ajax in combinatie met PHP

Offline cowb - 08/01/2011 12:57
Avatar van cowbLid Dag allemaal,

Ik wil mijn website even wat gaan uitbreiden, en daarvoor wil ik gebruik maken van ajax. Maar ik weet enkel nog niet hoe...
Daarom vragen even wat input.

Ik heb dus een bestaand formulier, maar ik wil ervoor zorgen dat er ook foto's kunnen aan toegevoegd worden. Dus dacht ik...

Ik maak een knopje, dan komt er al dan niet via zo'n lightbox een extra formuliertje waar ik mijn afbeelding mee kan selecteren en een titel kan geven. Als ik dan op opslaan druk sla ik de foto op in een map op de server en tegelijk maak ik een record aan in een andere database.

Het php deel is net echt een probleem, maar php in combinatie van ajax is voor mij iets totaal vreemd. Maar ik wil het wel leren.
Is er hier iemand die mij een duwtje in de goede richting kan geven?

13 antwoorden

Gesponsorde links
Offline tomate - 08/01/2011 13:24 (laatste wijziging 08/01/2011 13:25)
Avatar van tomate Lid Eerst en vooral moet je weten hoe je ajax aanroept.
De simpelste manier is via jQuery.
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var data = "gegeven1=1&gegeven2=2"; //Hier link je hem best aan je eerste database, werkt zoals de $_GET in php in je pagina.php-file
  2.  
  3. §.get('ajax/pagina.php', data, function(html){
  4. $('#ajax-output").html(html); 
  5. alert("Mijn ajax-request is geslaagd"); //Dient enkel om te kijken of het werkt, mag dus weg eigenlijk.
  6. });


In je bestand pagina.php zet je dan alle php gegevens. Alles wat daar dan ingezet wordt en weergegeven moet worden gebeurt in bv de DIV met id="ajax-out".

Het is kort uitgelegd maar ik hoop dat je het een beetje begrijpt, vergeet ook niet de jQuery library te includen. Ik ben bezig aan een tutorial over Ajax in combinatie met jQuery.
Offline Kevin - 08/01/2011 14:18
Avatar van Kevin Crew Ajax/REST Lees best eerst wat documentatie over de AJAX functie in jQuery (als je het met deze library gaat oplossen): http://api.jquery.com/jQuery.ajax

Wat je eigenlijk hiermee kan doen bv is een POST maken. Dit zit in dezelfde richting qua code als wat @tomate doet, alleen gebruikt hij een GET naar je PHP file toe.

Voorbeeldcode:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. $.ajax({
  2.    type: "POST",
  3.    url: "mijnfile.php",
  4.    data: "naam=test&locatie=Belgie",
  5.    success: function(msg){
  6.      alert( "Data Saved: " + msg );
  7.    }
  8.  });
Offline tomate - 08/01/2011 15:39
Avatar van tomate Lid
Kevin schreef:
Lees best eerst wat documentatie over de AJAX functie in jQuery (als je het met deze library gaat oplossen): http://api.jquery.com/jQuery.ajax

Wat je eigenlijk hiermee kan doen bv is een POST maken. Dit zit in dezelfde richting qua code als wat @tomate doet, alleen gebruikt hij een GET naar je PHP file toe.

Voorbeeldcode:
[..code..]


POST gaat ook perfect op mijn manier. Kevin zijn code is iets zwaarder en omslachtiger.
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var data = "gegeven1=hallo&gegeven2=2"; 
  2.  
  3. §.post('ajax/pagina.php', data, function(html){
  4. $('#ajax-output").html(html); 
  5. alert("Mijn ajax-request is geslaagd"); //Dient enkel om te kijken of het werkt, mag dus weg eigenlijk.
  6. });
Offline cowb - 08/01/2011 16:37
Avatar van cowb Lid Er komt nu wel even een vraagje in mij op...
Zoals ik reeds aangehaald heb werk ik met een formulier IN een ander formulier.
Met andere worden, uploadveld heeft ook een submit button.
Gaat dit geen conflict geven?
Als er bevoorbeeld geen foto hoeft toegevoegd worden dan gaat hij die ajax code toch uitvoeren neem ik aan?
Hoe kan je dan op één of andere manier een tag meegeven zodat er geen interferentie is?
Offline tomate - 08/01/2011 23:46 (laatste wijziging 08/01/2011 23:46)
Avatar van tomate Lid Je ajax-scriptje zal pas uitgevoerd worden als je op dat knopje duwt he. Dus zoiets:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <input type="button" onclick="ajaxFunctie();" value="Foto toevoegen" />
  2. <script type="text/javascript">
  3. function ajaxFunctie() {
  4.       var data = "gegeven1=hallo&gegeven2=2";
  5.  
  6.       §.post('ajax/pagina.php', data, function(html){
  7.       $('#ajax-output").html(html);
  8.       alert("Mijn ajax-request is geslaagd"); //Dient enkel om te kijken of het werkt, mag dus weg eigenlijk.
  9.       });
  10. }
Offline webbiexl - 09/01/2011 13:39
Avatar van webbiexl PHP interesse Ik zie maar 1 form staan in je code maar als je de naam van je submitknop aanpast is dat al verholpen
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <input type="submit" name="submitLogin" style="width: 100;" value="Aanmelden">
  2. <input type="submit" name="submitUpload" style="width: 100;" value="Upload">


en dan moet je ook de if-statement aanpassen.
php code - Bekijk de code zonder highlighting - Klap code in 
  1. if(isset($_POST['submit'])) {


wordt dan
php code - Bekijk de code zonder highlighting - Klap code in 
  1. if(isset($_POST['submitLogin'])) {
Offline cowb - 09/01/2011 13:43
Avatar van cowb Lid Bedankt allemaal. Het werkt all.
Het is nu wel nog zonder die lightbox, daar moet ik ook nog eens op zoeken hoe ik dat kan combineren.

Ik heb nu wel nog een ander probleempje bij gekregen...
Ik maak ook gebruik van lightbox2 op mijn website. Dit is een open source iets waarmee je op een heel mooie manier foto's kan weergeven...
http://www.huddletogether.com/projects/lightbox2/

Dit zat al in mijn site gebouwd. En als ik de jquery file toevoeg in mijn head tags dan doet mijn lightbox voor het weergeven van afbeeldingen het niet meer...
Weet iemand hoe ik dit kan oplossen?
Offline Sitebase - 09/01/2011 13:45
Avatar van Sitebase PHP expert @tomate

Je zegt dat Kevin zijn code zwaarder is maar dit is helemaal fout.
Kevin zijn code is juist sneller aangezien de jQuery post functie intern gebruik maakt van de ajax functie om de uiteindelijke request te doen.
Offline webbiexl - 09/01/2011 13:51
Avatar van webbiexl PHP interesse hangt er vanaf hoe je header in elkaar zit. Voornaamste is dat je de jquery library als eerst inlaad dus voor alle jquery scripts die je wilt uitvoeren
Offline tomate - 09/01/2011 13:55
Avatar van tomate Lid
WMP schreef:
@tomate

Je zegt dat Kevin zijn code zwaarder is maar dit is helemaal fout.
Kevin zijn code is juist sneller aangezien de jQuery post functie intern gebruik maakt van de ajax functie om de uiteindelijke request te doen.


Mijn excuses ;), dit is waar...
Maar als het het niet nodig is om de opties van ajax aan te passen in jQuery, blijft het - naar mijn mening - handiger om voor GET $.get en voor POST $.post te gebruiken.

Maar dat is persoonlijke keuze zkr? ;)
Offline cowb - 09/01/2011 13:58
Avatar van cowb Lid @webbiexl:

Dat is niet echt haalbaar denk ik...
mijn index pagina vast, alle andere pagina's worden in een tabel include. Dus ik moet alle library's in mijn index inladen omdat ik nooit aan mijn header kom.

Ik kan deze library wel in mijn pagina steken waar ik de jquery gebruik, maar dan staat het niet meer tussen mijn head tag's maar in mijn body...
Offline webbiexl - 09/01/2011 14:16
Avatar van webbiexl PHP interesse nee je library is de jquery engine: de jquery.1.4.4.js (ik weet de correcte bestandsnaam niet uit mn hoofd) daaronder zet je al je jquery applicaties (in geval van lightbox: lightbox.js, functie X: functiex.js
Offline cowb - 10/01/2011 11:06
Avatar van cowb Lid Inderdaad correct, ik had de lib van jQuery eerst onderaan ingevoegd, dan mijn lightbox het niet meer. En nu nadat ik het helemaal bovenaan gezet heb werkt dit perfect! :-)
Bedankt!
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.205s