AJAX loop array met data
De data uit de database wil ik graag met AJAX zichtbaar maken. Dit wil ik doen door een array terug te geven vanuit PHP.
D.m.v. Jquery wil ik dan de data netjes presenteren.
De dat terug krijgen zonder een array heb ik werkend maar dan kan ik de data niet presenteren zoals ik zou willen.
Dus ben ik op onderzoek uitgegaan maar loop gewoon vast hierop.
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<?php
$connection = mysqli_connect($wpdb->dbhost, $wpdb->dbuser, $wpdb->dbpassword, $wpdb->dbname);
$sql = "SELECT catname, catdescription FROM $cats_table";
$result = mysqli_query($connection,$sql);
while($row = $result->fetch_assoc()){
array_push($result_array, $row);
}
echo json_encode($result_array);
mysqli_close($connection);
?>
$connection = mysqli_connect($wpdb->dbhost, $wpdb->dbuser, $wpdb->dbpassword, $wpdb->dbname);
$sql = "SELECT catname, catdescription FROM $cats_table";
$result = mysqli_query($connection,$sql);
while($row = $result->fetch_assoc()){
array_push($result_array, $row);
}
echo json_encode($result_array);
mysqli_close($connection);
?>
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">
jQuery(document).ready(function($) {
select();
function select(){
var data = {
'action': 'select',
'todo': 'catselect',
};
jQuery.post(ajaxurl, data, function(response) {
console.log(response);
});
}
});
</script>
jQuery(document).ready(function($) {
select();
function select(){
var data = {
'action': 'select',
'todo': 'catselect',
};
jQuery.post(ajaxurl, data, function(response) {
console.log(response);
});
}
});
</script>
uileg:
Var data 'action' is de PHP functie die word aangeroepen
Var data 'todo' is een if statement waarin gekeken word welke info er gehaald moet worden.
Wie o wie zou mij kunnen helpen hiermee
Gewijzigd op 01/12/2019 12:47:59 door Loek Lemmens
Code (php)
1
2
2
header('Content-type: application/json; charset=utf-8'); // <--
echo json_encode($result_array);
echo json_encode($result_array);
Waarom gebruik je trouwens niet gewoon fetch_all(MYSQLI_ASSOC)? Dan hoef je ook niet rij voor rij eenzelfde array te vullen.
Waar komt "ajaxurl" trouwens vandaan?
En als je data uit de database zichtbaar wil maken middels AJAX, dan zou ik eigenlijk een GET-request verwachten, en geen POST request? Dit zou het debuggen van het AJAX-script ook aanzienlijk makkelijker maken, omdat je die dan rechtstreeks aan zou kunnen roepen met parameters in de querystring. Wel even een andere header introduceren als je in dat script (tijdelijk) HTML-output produceert.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<?php
function select() {
if($_POST['todo'] == "catselect"){
$connection = mysqli_connect($wpdb->dbhost, $wpdb->dbuser, $wpdb->dbpassword, $wpdb->dbname);
$sql = "SELECT catname, catdescription FROM $cats_table";
$result = mysqli_query($connection, $sql);
header('Content-type: application/json; charset=utf-8');
while($result_array = mysqli_fetch_array($result)){
echo json_encode($result_array);
}
}
}
?>
function select() {
if($_POST['todo'] == "catselect"){
$connection = mysqli_connect($wpdb->dbhost, $wpdb->dbuser, $wpdb->dbpassword, $wpdb->dbname);
$sql = "SELECT catname, catdescription FROM $cats_table";
$result = mysqli_query($connection, $sql);
header('Content-type: application/json; charset=utf-8');
while($result_array = mysqli_fetch_array($result)){
echo json_encode($result_array);
}
}
}
?>
Als ik dan vervolgens in de log kijk van de browser geeft hij NULL aan bij de response
Toevoeging op 01/12/2019 14:47:53:
Het is een code wat ik gebruik in Wordpress. Wordpress heeft directe AJAXcalls geblokt en je bent verplicht om binnen Wordpress gebruik te maken van ajaxurl.
De var action en de var todo corresponderen met php functies die je kunt aanroepen.
Gewijzigd op 01/12/2019 14:45:52 door Loek Lemmens
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<?php
while($row = $result->fetch_assoc()){
array_push($result_array, $row);
}
echo json_encode($result_array); // één set JSON-code
?>
while($row = $result->fetch_assoc()){
array_push($result_array, $row);
}
echo json_encode($result_array); // één set JSON-code
?>
in vergelijking met je laatste fragment:
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
function select() {
if($_POST['todo'] == "catselect"){
$connection = mysqli_connect($wpdb->dbhost, $wpdb->dbuser, $wpdb->dbpassword, $wpdb->dbname);
$sql = "SELECT catname, catdescription FROM $cats_table";
$result = mysqli_query($connection, $sql);
header('Content-type: application/json; charset=utf-8');
while($row = mysqli_fetch_array($result)){
$resultArray[] = $row;
}
echo json_encode($resultArray);
}
}
?>
function select() {
if($_POST['todo'] == "catselect"){
$connection = mysqli_connect($wpdb->dbhost, $wpdb->dbuser, $wpdb->dbpassword, $wpdb->dbname);
$sql = "SELECT catname, catdescription FROM $cats_table";
$result = mysqli_query($connection, $sql);
header('Content-type: application/json; charset=utf-8');
while($row = mysqli_fetch_array($result)){
$resultArray[] = $row;
}
echo json_encode($resultArray);
}
}
?>
output:
Code (php)
1
2
2
{"catname":"naam 1","catdescription":"blabla 1"},
{"catname":"naam 2","catdescription":"blabla 2"},
{"catname":"naam 2","catdescription":"blabla 2"},
Gewijzigd op 01/12/2019 15:25:38 door Jop B
Nu heb ik een each functie bij het resultaat maar wederom krijg ik dan de data niet in de alert
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
jQuery(document).ready(function($) {
select();
function select(){
var data = {
'action': 'select',
'todo': 'catselect',
};
jQuery.post(ajaxurl, data, function(response) {
$.each(response(function( i ){
alert(response[i].catname);
}));
});
}
});
</script>
jQuery(document).ready(function($) {
select();
function select(){
var data = {
'action': 'select',
'todo': 'catselect',
};
jQuery.post(ajaxurl, data, function(response) {
$.each(response(function( i ){
alert(response[i].catname);
}));
});
}
});
</script>
Gewijzigd op 01/12/2019 15:50:38 door Loek Lemmens
Het is ook een naamloze functie. De functie "response" bestaat niet. Kijk je ook in je developer console (meestal onder de functietoets F12 in de "console" tab) naar JavaScript foutmeldingen? Dit script gaat waarschijnlijk hard onderuit.
Vergelijk:
Code (php)
1
2
2
$.each(response(function( i ){ ... }))
// ^ ^
// ^ ^
Met
Code (php)
1
2
2
$.each(response, function( i ){ ... })
// ^
// ^
Dit is ook iets wat je in afzondering kunt testen?
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>
<meta charset="UTF-8">
<title>JSON foreach</title>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</head>
<body>
<?php
$out = array(
array('catname' => 'one', 'catdescription' => 'description one'),
array('catname' => 'two', 'catdescription' => 'description two'),
);
?>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
var out = <?php echo json_encode($out); ?>;
$.each(out, function(key, value) {
// beide varianten werken
alert(out[key].catname);
alert(value.catname);
});
});
//]]>
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON foreach</title>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</head>
<body>
<?php
$out = array(
array('catname' => 'one', 'catdescription' => 'description one'),
array('catname' => 'two', 'catdescription' => 'description two'),
);
?>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
var out = <?php echo json_encode($out); ?>;
$.each(out, function(key, value) {
// beide varianten werken
alert(out[key].catname);
alert(value.catname);
});
});
//]]>
</script>
</body>
</html>
Gewijzigd op 01/12/2019 16:54:08 door Thomas van den Heuvel
Code (php)
1
jQuery.post(url, data, function() {},"json");
Het is natuurlijk wel altijd beter om extra "hints" te geven als je weet wat je terug zou moeten krijgen, maar dit is niet verplicht / geen noodzakelijke voorwaarde voor correcte operatie.
EDIT: zoals de volgende code laat zien heb je geen dataType hint nodig
jquery.each.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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON foreach</title>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$.post('jquery.each.ajax.php', {}, function(data) {
$.each(data, function(key, value) {
// beide varianten werken
console.log('with key: '+data[key].catname);
console.log('with value: '+value.catname);
});
});
});
//]]>
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON foreach</title>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$.post('jquery.each.ajax.php', {}, function(data) {
$.each(data, function(key, value) {
// beide varianten werken
console.log('with key: '+data[key].catname);
console.log('with value: '+value.catname);
});
});
});
//]]>
</script>
</body>
</html>
jquery.each.ajax.php
Code (php)
Gewijzigd op 01/12/2019 21:53:48 door Thomas van den Heuvel