Hoy,

Ik heb een probleempje.

Ik ben net begonnen met jQuery AJAX en wil met die jQuery AJAX gegevens naar een database schrijven.
Nu ik kan al gegevens uit de database halen maar ik weet nog geen duidelijke manier om gegevens naar de database te schrijven.

Ik heb al geprobeerd om een script te maken maar tot nu toe nog geen succes en weet ook nog niet precies waar ik ergens moet beginnen dus ben maar met iets gaan "experimenteren" maar tot nu toe zonder succes, al geloof ik wel dat ik er dicht tegen zit :p.

Nou goed, hier de html:


<span class="invoer">[Invoeren]</span><input type="text" name="naam" id="naam"><div class="dataInput"></div>

En hier de jQuery:


$(function(){
$('.invoer').click(function(){
alert('invoer');
postData();
});
});


function postData(){
dataString = $("#naam").serialize();

alert('tussenstap gemaakt. Datastring: '+dataString);

var output = '';

$.ajax({
type: 'POST',
url: 'php.php?function=postdata',
data: dataString,
dataType: 'json',
beforeSend: function (data){
$('.knop').after("<img src='./images/loader.gif' id='loader'>");
var i = $('#loader');
var ih = i.height();
var iw = i.width();
var w = $(window);
var wh = w.height();
var ww = w.width();
totalHeight = wh-ih;
height = totalHeight/2;
totalWidth = ww-iw;
width = totalWidth/2;
i.css({'margin-top':height,'margin-left':width,'position':'absolute'});
},
success: function(data){
$('img#loader').remove();
output += 'De gegevens zijn succesvol ingevoerd <br>';
$(".dataInput").html(output);
},
error: function(data){
$('img#loader').remove();
output += 'De gegevens kunnen niet worden ingevoerd <br>';
$(".dataInput").html(output);
}
});
};


En hier de PHP code:



function postData(){ //$input = '[{"id":"1","naam":"Nu hebben we weer 1 als ID"},{"id":"2","naam":"hoy...."},{"id":"3","naam":"hoy2...."}]'; $input = $_POST['naam']; $json = json_decode($input,true); foreach($json as $value){ mysql_query("INSERT INTO ajax.ajax(naam) VALUES('".$value['naam']."')"); //echo 'Key: '.$value['id'].' value: '.$value['naam'].'<br>'; }}

Dus wat moet het eigenlijk doen, heel "simpel".
Ik klik op de tekst-knop [Invoer] en dan laad er een loading plaatje in wanneer het invoeren is gelukt komt er een tekstje te staan dat het gelukt is en dan verdwijnt het loading plaatje -> deze werking zou het moeten zijn maar het gaat dus steeds fout. Ik heb nog geen goed voorbeeld gevonden op Google om de logica beter te snappen, daarom is het me ook nog niet gelukt, nu de ajax stuurt iets door naar het php script vermoedelijk onder de naam van het veld dus "naam" + de waarde ervan. Het php script moet dit opvangen en terug coderen naar php code omdat als het van AJAX komt en data type JSON staat moet dit in JSON zijn gestuurd, hier heb ik json_decode() voor gebruikt die zijn invoer krijgt van de $_POST['naam'] maar dit werkt dus niet...

Kan iemand me met dit script helpen? Ik heb dit gemaakt gewoon om de logica ervan te begrijpen zodat ik er straks mee aan de slag kan gaan.

Kan er helaas niet vandaag naar kijken maar morgen zal ik kijken wat ik voor je kan doen.

Ik post ff de hele scripts, dan zie je meteen alles...

jQuery ajax script:


$(function(){
$('.knop').click(function(){
alert('Hoy');
setInterval(function(){getData()},3000);
});
});


function getData(){
$.ajax({
url: 'php.php?function=getdata',
dataType: 'json',
beforeSend: function (data){
$('.knop').after("<img src='./images/loader.gif' id='loader'>");
var i = $('#loader');
var ih = i.height();
var iw = i.width();
var w = $(window);
var wh = w.height();
var ww = w.width();
totalHeight = wh-ih;
height = totalHeight/2;
totalWidth = ww-iw;
width = totalWidth/2;
i.css({'margin-top':height,'margin-left':width,'position':'absolute'});
},
success: function(data){
var output = '';
$('img#loader').remove();
$.each(data, function(key, value){
output += 'key: ' + value.id + ', value: ' + value.naam + '<br>';
})

$(".data").html(output);
},
error: function(data){
var output = '';
$('img#loader').remove();
$.each(data, function(key, value){
output += 'key: ' + value.id + ', value: ' + value.naam + '<br>';
})

$(".data").html(output);
}
});
};


$(function(){
$('.invoer').click(function(){
alert('invoer');
postData();
});
});


function postData(){
dataString = $("#naam").serialize();

alert('tussenstap gemaakt. Datastring: '+dataString);

var output = '';

$.ajax({
type: 'POST',
url: 'php.php?function=postdata',
dataType: 'json',
beforeSend: function (data){
$('.knop').after("<img src='./images/loader.gif' id='loader'>");
var i = $('#loader');
var ih = i.height();
var iw = i.width();
var w = $(window);
var wh = w.height();
var ww = w.width();
totalHeight = wh-ih;
height = totalHeight/2;
totalWidth = ww-iw;
width = totalWidth/2;
i.css({'margin-top':height,'margin-left':width,'position':'absolute'});
},
success: function(data){
$('img#loader').remove();
output += 'De gegevens zijn succesvol ingevoerd <br>';
$(".dataInput").html(output);
},
error: function(data){
$('img#loader').remove();
output += 'De gegevens kunnen niet worden ingevoerd <br>';
$(".dataInput").html(output);
}
});
};


PHP script:



<?php


$db = mysql_connect('localhost', 'ajax', 'ajax');
mysql_select_db('ajax', $db);


if($_GET['function'] == 'getdata'){ getData(); }
if($_GET['function'] == 'postdata'){ postData(); }


function getData(){
$select = "SELECT * FROM ajax";
$sql = mysql_query($select);

if(mysql_num_rows($sql)>=1){
while($row = mysql_fetch_assoc($sql)){
$output[] = $row;
}
}else{
$output[] = array("id"=>"Geen waarden", "naam"=>"Database is leeg.");
}

echo json_encode($output);
}
/************************************************** **************************/


function postData(){
//$input = '[{"id":"1","naam":"Nu hebben we weer 1 als ID"},{"id":"2","naam":"hoy...."},{"id":"3","naam":"hoy2...."}]';
$input = $_POST['naam'];
$json = json_decode($input,true);

foreach($json as $value){
mysql_query("INSERT INTO ajax.ajax(naam) VALUES('".$value['naam']."')");
//echo 'Key: '.$value['id'].' value: '.$value['naam'].'<br>';
}
}


?>


en de html:



<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>AJAX Development</title>
<script type="text/javascript" src="js/aaa.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/ajax.js" charset="UTF-8"></script>
</head>
<body>
<span class="knop">[Knop]</span>
<div class="data"></div>
<br>
<br>
<span class="invoer">[Invoeren]</span><input type="text" name="naam" id="naam">
<div class="dataInput"></div>
</body>
</html>


Het uit de database halen lukt maar er gegevens in opslaan lukt niet.
(is een test script om de functies beter te leren kennen en verdere functies aan toe te voegen om ajax en json meer onder de knie te krijgen.)

Kan je mij de hele zip sturen in mijn pm box ?
Dan zal ik het uitwerken en toevoegen wat je de volgende keer moet doen.

En kan je er een beetje aan uit?

Groetjes,
Lenny

Beste,

Ik heb de oplossing al gevonden.
In ieder geval, hartelijk dank voor jullie hulp.

De oplossing is eigenlijk hetzelfde

1. jQuery ajax haalt de waarden uit het veld.
2. jQuery ajax post de gegevens naar het php script.
3. het php script verwerkt vervolgens de gegevens.

Meer was het niet.
De code was dus niet zoveel afwijkend van de eerste functie.