Door
Johnny Test
op 26-03-2015 09:37
gewijzigd op 26-03-2015 09:51
3.723 views
Ik moet een javascript variabele omzetten naar een php variabele zonder page refreshes.
Hiervoor heb ik een voorbeeld code gebruikt >met een echo< om te zien of dit zou werken als ik het volledig zou maken.
ajaxtest.php
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<form>
<input type="text" id="name" placeholder="Enter Your Name..." /><br />
<input type="text" id="age" placeholder="Enter Your Age..." /><br />
<input type = "button" value="Submit" onclick="post();">
</form>
<div id="result"></div>
<script type ="text/javascript">
function post()
{
var name = $('#name').val;
var age = $('#age').val;
$.post('ajax.php', {postname:name,postage:age},
function()
{
$('#result').html(data);
});
}
</script>
</body>
</html>
ajax.php
<?php
echo "Working";
?>
Spijtig genoeg gebeurt de 'echo "working"; ' helemaal niet wanneer er op de knop gedrukt word, kan iemand mij even helpen?
Waar zouden deze dan percies moeten staan? Ik denk nu dat het aan mijn jquery.js ligt, zelfs de kleinste oefening met het jquery bestand wil niet werken.
Daar zal het echt niet aan liggen hoor, tenzij je er zelf in gaat editten, wat niet de bedoeling is.
Je moet om je code waar je jQuery in gebruikt dit gebruiken:
$(document).ready(function(){
/* .... HIER JE SCRIPT.... */
});
Dus uiteindelijk krijg je, als je ook het onclick laat vervallen, het volgende script:
<script type ="text/javascript">
$(document).ready(function(){
$( "#submit" ).click(function() {
var name = $('#name').val();
var age = $('#age').val();
$.post('ajax.php', {postname:name,postage:age},
function()
{
$('#result').html(data);
});
});
});
</script>
Dan moet je zelf nog wel even een id="submit" aan je submit-button toevoegen.
Nog mooier is als je deze code in een apart .js-bestand zet en deze inlaadt.
@code topicstarter
Je krijgt een JavaScript foutmelding, wat al een aardige hint zou moeten zijn:
Error: ReferenceError: data is not defined
Daarnaast zou je jQuery-JavaScript kunnen / moeten schrijven in een unobtrusive manier, oftewel, vervuil je HTML-code niet met JavaScript (onclick etc.) als dit niet hoeft.
@code Aar
Het event wat je wilt "afvangen" is de form submit.
Vervolgens moet het formulier niet gesubmit worden, wat wel zou gebeuren als niet alles afgevangen werd met een "onClick", maar:
En tot slot moet je de data die je teruggeeft ook doorgeven, wat nu niet gebeurt (de callback-functie heeft geen parameters).
Daarnaast: als je de formulier-velden voorziet van een name-attribuut (wat volgens mij ook verplicht is?) dan kun je alle formuliervelden in 1x samennemen met .serialize().
Al deze punten gecombineerd:
index.htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<form id="form" accept-charset="UTF-8">
<input type="text" name="name" placeholder="Enter Your Name..." /><br />
<input type="text" name="age" placeholder="Enter Your Age..." /><br />
<button type="submit">Submit</button>
</form>
<div id="result"></div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$('#form').submit(function(e) {
e.preventDefault(); // voorkom het daadwerkelijk submitten
$.post('ajax.php', $('#form').serialize(), function(data) { // geef data ook mee aan callback...
$('#result').html(data);
});
});
});
//]]>
</script>
</body>
</html>
ajax.php
<?php
// geef ook aan wat je teruggeeft...
header('Content-Type: text/html; charset=UTF-8');
function escape($in) {
return htmlspecialchars($in, ENT_QUOTES, 'UTF-8');
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
?><pre><?php echo print_r(array_map('escape', $_POST), true) ?></pre><?php
} else {
?><p>script was not called through POST</p><?php
}
?>
