Ajax en PHP

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mark Markson

Mark Markson

22/07/2012 22:51:19
Quote Anchor link
Ik heb een probleem met Ajaz. Ik probeer een applicatie te maken waarbij een bericht wordt opgeslagen in een database en wordt weergegeven. Nadat je op
"enter" drukt moet dit gebeuren.

Ik probeer dit met PHP en Ajax, maar ik faal nog hopeloos. Dit is mijn code:

<div id="tekst">
<h3>Nieuw bericht</h3>
<textarea id="blogtekst" name="blogtekst" cols="50" rows="20" placeholder="Iets te melden? Vul maar in!" onKeyPress="EnterKnop();"></textarea>
</div>

function EnterKnop(str)
{
if(event.keyCode==13)
{
//var str = document.getElementById("blogtekst").value;

alert("hoi");

if (str=="")
{
document.getElementById("blogtekst").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("blogtekst").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","blogverwerk.php",true);
xmlhttp.send();
}
}

ik snap niet wat er fout gaat...
 
PHP hulp

PHP hulp

19/10/2021 14:39:31
 
- Ariën -
Beheerder

- Ariën -

22/07/2012 23:11:50
Quote Anchor link
Ik ook niet.....
Wat gebeurt er wel, en waar loopt het fout?
 
Mark Markson

Mark Markson

22/07/2012 23:16:07
Quote Anchor link
Ik had een alert die keek of het wel de enterknop was, die deed het gewoon. Hij opent blogverwerk.php niet, daar heb ik een echo staan die er niet komt...
 
- Ariën -
Beheerder

- Ariën -

22/07/2012 23:36:23
Quote Anchor link
kwestie van even debuggen. Gooi eens wat meer alert()'s in je code?
 
Mark Markson

Mark Markson

22/07/2012 23:41:11
Quote Anchor link
Hij kan blogverwerk.php niet openen, om de een of andere rede...
 
- Ariën -
Beheerder

- Ariën -

22/07/2012 23:43:48
Quote Anchor link
dat valt te debuggen.
Wat zeggen xmlhttp.status en xmlhttp.readyState?
 
Yoop Overmaat

Yoop Overmaat

22/07/2012 23:50:04
Quote Anchor link
Je net hier enkellijns bezig, dit gaat niet werken als je eerst het geheel in een database stopt.
Hier zul je 2lijns asynchroon moeten gaan werken met een stuk php waarmee je het geheel in de database zet & een stuk php waarmee je het geheel daarna middels innerhtml weer in een div plaatst.

Zal er even een voorbeeld bijzetten:

window.onload=receive;

function send(){ //in jouw geval function Enterknop()
if (chatsend.readyState == 4 || chatsend.readyState == 0){
chatsend.open("POST","input.php",true);
chatsend.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
chatsend.onreadystatechange = handlesend;
var param = "nickname=" + document.getElementById('nickname').value +
"&message=" + document.getElementById('message').value;
chatsend.send(param);
document.getElementById('message').value='';

}
}

function handlesend(){
clearTimeout();
receive();
}

function receive(){
if(chatreceive.readyState == 4 || chatreceive.readyState == 0){
chatreceive.open("GET","output.php",true);
chatreceive.onreadystatechange=handlereceive;
chatreceive.send(null);
}
}

function handlereceive(){
if (chatreceive.readyState == 4) {
document.getElementById("chat").innerHTML=chatreceive.responseText;
}
setTimeout('receive()', 4000);
}
//Nu splits je je httprequest in 2en op in chatsend &chatreceive zie onderaan

function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}

var chatreceive = getHTTPObject();
var chatsend = getHTTPObject();


Succes!
Gewijzigd op 22/07/2012 23:57:06 door Yoop Overmaat
 
Mark Markson

Mark Markson

22/07/2012 23:51:25
Quote Anchor link
Dankje voor je reactie, maar met dit stukje code kom ik nergens...Het is een soort twitter-achtig iets
 
- Ariën -
Beheerder

- Ariën -

22/07/2012 23:54:37
Quote Anchor link
Zie ook mijn reactie...
 
Yoop Overmaat

Yoop Overmaat

23/07/2012 00:03:25
Quote Anchor link
@ Mark

Het is oorspronkelijk een chat op een testserver wwar ik mee bezig ben. Maar tussen een blog & een chat zitten technisch gezien geen verschillen daar de basis hetzelfde is. Zie een blog maar als een superslowchat.
 
Veur Heur

Veur Heur

23/07/2012 00:54:43
Quote Anchor link
Kijk i.p.v. zelf het wiel uitvinden naar oplossingen zoals jQuery.
 
- Ariën -
Beheerder

- Ariën -

23/07/2012 01:04:00
Quote Anchor link
Ja, jQuery is het wiel pas opnieuw uitvinden ;-).

Je kan het gebruiken, maar het is ook niet verplicht. Ik geef toe, het werkt wel veel makkelijker...
Gewijzigd op 23/07/2012 01:04:28 door - Ariën -
 
Mark Markson

Mark Markson

23/07/2012 17:21:20
Quote Anchor link
Het is me EINDELIJK gelukt! Tuurlijk kan je plugins gebruiken, maar ik ben trots op mijn misschien simpele script :p, ben nog bezig met de opleiding.

Maar goed, mijn volgende vraag:

Hoe gebruik je een preloader? Terwijl hij het bericht aan het verzenden is, wil ik heel graag een preloader zien met bijvoorbeeld

"Uw bericht wordt geplaatst..."

of nog leuker

een afbeelding
 
- Ariën -
Beheerder

- Ariën -

23/07/2012 17:31:57
Quote Anchor link
ikzelf gebruik jQuery, de $.ajax() en de success-event
 
Wouter J

Wouter J

23/07/2012 17:35:11
Quote Anchor link
Maar met Raw JS kan je het zo doen:
1) Wanneer je een AJAX request doet verander je de tekst van de content in een afbeelding of preloader tekst
2) Wanneer de AJAX request klaar is verander je de tekst in de net opgehaalde content.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
function runAjaxRequest() {
    document.querySelector('blogtekst').innerHTML = 'preloader tekst';

    // voer AJAX code uit en plaats de content bij een onreadystatechange event
}
 



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.