PHP met json_encode via Ajax naar JS

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

G Jansma

G Jansma

14/04/2017 23:27:37
Quote Anchor link
Hallo,

Ik ben recent begonnen met Javascript maar kom er even niet meer uit. Ik wil gegevens vanuit Mysql, via PHP naar Javascript halen. Ik geloof dat dat via json_encode en Ajax moet, maar kom er niet helemaal meer uit. Het PHP-gedeelte is volgens mij in orde, maar het Ajax deel mankeert nog wat aan. Ik heb al van alles geprobeerd en rondgezocht maar kom er niet uit. Kunnen jullie me helpen?


Ik heb twee bestanden:

Php_json.php
Output = [{"bod_id":"89","item_id":"100","bieder_id":"56","waarde":"178","tijd":"2017-04-14 22:14:24"}].
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php

header('Content-Type: application/json; charset=UTF-8');

$con = mysqli_connect("xxx","xxx","xxx","xxx");
if (mysqli_connect_errno()){ echo "Failed to connect to MySQL: " . mysqli_connect_error();}

$sql = "SELECT * FROM biedingen WHERE item_id = 100 ORDER BY waarde DESC, tijd ASC LIMIT 1";
$result = mysqli_query($con, $sql);

$array = array();
while($row = mysqli_fetch_assoc($result)){

    $array[] = $row;
}

echo json_encode($array);

?>


Js_json.php

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  

<script id="source" language="javascript" type="text/javascript">

    $.ajax({                                      
        url: 'php_json.php',
        method:  "POST",
        dataType: 'json',
        success: function(data)
        {  
 
        var id = data['bieder_id'];
    alert(id);

        }
    });

</script>
 
PHP hulp

PHP hulp

25/12/2024 08:12:47
 
Ben van Velzen

Ben van Velzen

14/04/2017 23:30:02
Quote Anchor link
Wat er zo te zien nu gebeurt is dat je een willekeurig aantal records kan terugkrijgen, maar je behandelt het in javascript alsof het een enkel record betreft. Waarschijnlijk kom je met data[0]['bieder_id'] wat verder.
 
G Jansma

G Jansma

14/04/2017 23:36:44
Quote Anchor link
Verrek ja, zit ik dus al een uur mee te prutsen. Thanks man!

Toevoeging op 15/04/2017 00:21:51:

G Jansma op 14/04/2017 23:36:44:
Verrek ja, zit ik dus al een uur mee te prutsen. Thanks man!


Edit: Nog een vraagje. Ik merk dat die variabel 'id' buiten die Ajax structuur niet werkt. Is er een mogelijkheid om die daar buiten te kunnen gebruiken?
 
Ben van Velzen

Ben van Velzen

15/04/2017 00:33:39
Quote Anchor link
Eventueel wel, door een variabele te setten met een bredere scope dan binnen de function call. Ik vraag me alleen wel af wat je daarmee zou bereiken:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
var id;
$.ajax({                                      
  url: 'php_json.php',
  method:  "POST",
  dataType: 'json',
  success: function(data)
  {  
    id = data[0]['bieder_id'];
    alert(id);
  }
});


In die zin zou ik dus vragen wat wil je bereiken? Uit het antwoord daarop volgt een logische oplossing.
Gewijzigd op 15/04/2017 02:07:28 door Ben van Velzen
 
G Jansma

G Jansma

15/04/2017 08:01:18
Quote Anchor link
Ik probeer een soort van veilingsysteem te maken. Ik wil met een interval (nog weggelaten) dan telkens het hoogste bod en tijdstip ophalen. Dat wil ik gebruiken om te kijken of iemand heeft overboden en anders te melden dat hij hetzelfde of te laag heeft geboden.

Het lijkt me dan handig als ik de variabel 'highest' ook verderop in het script nog zou kunnen gebruiken. In onderstaande code werkt de alert wel, maar de document.write geeft undefined aan.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  

<script id="source" language="javascript" type="text/javascript">

var highest;

$.ajax({                                      
  url: 'php_json.php',
  method:  "POST",
  dataType: 'json',
  success: function(data)
  {  
    highest = data[0]['waarde'];
    alert(highest);
  }
});

document.write(highest);
        
</script>


Voorbeeld van een vergelijking:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
if(Bid == highest) {

document.getElementById("error").innerHTML = "Er is al een even hoog bod gedaan. ("+Bid+").";
$('#error').fadeIn().delay(5000).fadeOut();
document.getElementById('numbersonly').value='';
return;        
}
 
Ben van Velzen

Ben van Velzen

15/04/2017 12:13:23
Quote Anchor link
Dat klopt, want highest wordt asynchroon gevuld. En dat is per definitie nadat de rest van het script is uitgevoerd.
Het zou wel werken als je het op een later punt bijvoorbeeld als controle gebruikt op een formulier.
Gewijzigd op 15/04/2017 12:13:46 door Ben van Velzen
 
G Jansma

G Jansma

15/04/2017 17:08:06
Quote Anchor link
Ok, dat had ik ook kunnen weten dat Ajax asynchroon is.

Ik heb zitten denken, maar ik kom er niet helemaal uit hoe ik nou kan krijgen wat ik wil. Ik probeer een soort veilingsysteem te maken met een countdown. Er wordt telkens opnieuw een item geveild, waarbij bedrag en tijdstip van aflopen worden verwerkt in de database. Na elk bod moet er weer 30 sec bijkomen. Ik moet dus telkens weten welk item wordt geveild, wat het hoogste bedrag en wat het tijdstip is waarop de deadline afloopt. Ik heb dus die gegevens die ik met die json_encode ophaal nodig (denk ik). Of zijn daar nog alternatieven voor? Of moet ik alles tussen de {} bij de json plempen om dat resultaat te gebruiken?

Ik heb de code maar even toegevoegd, dat maakt eea wat meer inzichtelijk, maar het is nog niet helemaal zoals bovenstaand.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
    <head><h1 id="title"></h1>
</head>
    
    <body>
        <div id='formulier'>
        <input name="input" type="text" id="numbersonly" />
        <input type="submit" id="submit" value="bid" onclick="change()"/>
        </div>
        
        <div id="error" class="error"></div>
        <div id='live_item'></div>
        <div id='live_biedingen'></div>
        
        <p id="demo"></p>
    </body>

</html>

<?php
date_default_timezone_set('UTC');
$time = date("Y-m-d H:i:s");
$time1 = date("Y-m-d H:i:s", time() + 10);

echo $time;
echo "<br>";
echo $time1;
?>

<script>

    var min = 1;
    var max = 1000;
    var highest;
    var item = 100;
    
    //LEEG INVOERVELD
    $('input').attr('disabled', false);
    
    //DE JSON WAAR IK HET HOOGSTE BOD EN TIJD VAN WIL OPHALEN
    
    $.ajax({                                      
        url: 'current_item.php',
        method:  "POST",
        dataType: 'json',
        success: function(data)
        {  
            var highest = data[0]['waarde'];

            console.log(highest);
        }
    });

    setInterval(function () {
        $('#live_item').load("current_item.php")}, 1000); // TONEN GEGEVENS VAN ITEM

    setInterval(function () {
        $('#live_biedingen').load("biedingen.php")}, 1000); // TONEN LAATSTE BIEDINGEN OP ITEM
        
    //Button click en enter verzenden
    $('#submit').click(function() {
    return false;
    });

    $('#numbersonly').on('keyup', function(e) {
        
        if (e.keyCode === 13) {
            $('#submit').click();
        }
    });
        
    //Alleen getallen kunnen invoeren

        document.getElementById('numbersonly').addEventListener('keydown', function(e) {
        var key   = e.keyCode ? e.keyCode : e.which;
    
            if (!( [8, 9, 13, 27, 46, 110, 190].indexOf(key) !== -1 ||
                (key == 65 && ( e.ctrlKey || e.metaKey  ) ) ||
                (key >= 35 && key <= 40) ||
                (key >= 48 && key <= 57 && !(e.shiftKey || e.altKey)) ||
                (key >= 96 && key <= 105)
            )) e.preventDefault();
        });

    //Wanneer de button geklikt wordt
    
    function change(){
    
        var bid = document.getElementById('numbersonly').value;
        
        if(bid) {} else {bid = 0;}
  
        //Minimum en maximum
        if(bid < min || bid > max) {
            document.getElementById("error").innerHTML = "Ongeldig bod ("+bid+").";
            $('#error').fadeIn().delay(5000).fadeOut();
            document.getElementById('numbersonly').value='';        
            return;
        }
  
        //Hele getallen
        if (bid % 1 !== 0) {
            document.getElementById("error").innerHTML = "Alleen bieden in hele getallen ("+bid+").";
            $('#error').fadeIn().delay(5000).fadeOut();
            document.getElementById('numbersonly').value='';
            return;
        }
    
        //Bod hoger dan hoogste bod
        if(bid < highest) {
            document.getElementById("error").innerHTML = "Je bod is lager dan het hoogste bod ("+bid+").";
            $('#error').fadeIn().delay(5000).fadeOut();
            document.getElementById('numbersonly').value='';
            return;
        }
        
        //Bod gelijk aan hoogste bod
        if(bid == highest) {
            document.getElementById("error").innerHTML = "Er is al een even hoog bod gedaan. ("+bid+").";
            $('#error').fadeIn().delay(5000).fadeOut();
            document.getElementById('numbersonly').value='';
            return;        
        }

        //Op zich niet nodig
        var title = document.getElementById('title');
        title.innerHTML = bid;

        //Input weer leegmaken
        document.getElementById('numbersonly').value='';

        //Verzenden naar mysql php pagina        
        $.ajax({
            
            url:"insert.php",  
            method:"POST",  
            data:{0:item, 1:bid},  
            dataType:"text",  
            success:function(data){
                
                fetch_data();
                        
            }  
        });
    }
    
/// COUNTDOWN
    
tijd = "<?php echo $time; ?>";
tijd1 = "<?php echo $time1; ?>";

// Split timestamp into [ Y, M, D, h, m, s ]
var t = tijd.split(/[- :]/);
var startDate = new Date(Date.UTC(t[0], t[1]-1, t[2], t[3], t[4], t[5]));

// Split timestamp into [ Y, M, D, h, m, s ]
var c = tijd1.split(/[- :]/);
var countDownDate = new Date(Date.UTC(c[0], c[1]-1, c[2], c[3], c[4], c[5]));

  var distance = countDownDate - startDate;

// Update the count down every 1 second
var x = setInterval(function() {

  // Find the distance between now an the count down date

  distance = distance - 1000;
  
  // Time calculations for days, hours, minutes and seconds
  var seconds = Math.floor(distance / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = seconds + "s ";
  
  distance1 = distance;

  // If the count down is finished, write some text
  if(distance < 0) {
      
        document.getElementById("demo").innerHTML = "Check voor last minute-biedingen.";
        $('input').attr('disabled', 'disabled');

  }

  //Even uitgezet, maar moet dus kijken of er nog een bod gedaan is op het eind. En dan weer 30 sec.
  if(distance1 < -6000) {
      
        document.getElementById("demo").innerHTML = "Er was nog een bod gedaan."
        $('input').attr('disabled', false);
        distance = 30000;

  }
  
  
  //En dan zoniet, deadline verlopen
  if (distance1 < -5000) {
    clearInterval(x);
    document.getElementById("formulier").disabled = true;
    document.getElementById("demo").innerHTML = "EXPIRED";
    item = 100;
        
        // VERWERKEN ALS COUNTDOWN VERLOPEN
    
        $.ajax({  
                                
            url:"aankoop.php",  
            method:"POST",  
            data:{0:item},  
            dataType:"text",
            success:function(data){
            fetch_data();
                        
            }  
        });
    
  }
}, 1000);

</script>
 



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.