ajax post naar php
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
Code (php)
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
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
<!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>
<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
Spijtig genoeg gebeurt de 'echo "working"; ' helemaal niet wanneer er op de knop gedrukt word, kan iemand mij even helpen?
Gewijzigd op 26/03/2015 09:51:29 door Johnny Test
Code (php)
1
2
3
2
3
$(document).ready(function(){
/* .... HIER JE SCRIPT.... */
});
/* .... HIER JE SCRIPT.... */
});
Verder is een onClick-event in JS ook overbodig, omdat jQuery zelf als een .click()-functie heeft, die door een element getriggerd kan worden.
Code (php)
1
2
3
2
3
$( "#target" ).click(function() {
// hier je script
});
// hier je script
});
Gewijzigd op 26/03/2015 10:10:25 door - Ariën -
Je moet om je code waar je jQuery in gebruikt dit gebruiken:
Code (php)
1
2
3
2
3
$(document).ready(function(){
/* .... HIER JE SCRIPT.... */
});
/* .... HIER JE SCRIPT.... */
});
Dus uiteindelijk krijg je, als je ook het onclick laat vervallen, het volgende script:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>
$(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.
Gewijzigd op 26/03/2015 11:02:09 door - Ariën -
Je krijgt een JavaScript foutmelding, wat al een aardige hint zou moeten zijn:
Quote:
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
Code (php)
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
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
<!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>
<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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<?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
}
?>
// 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
}
?>