✔ Wie benutzt man jQuery’s $.ajax() Funktion

Registrierer · 17. August 2015

saftmeister hat gesagt.:
Ein error-Callback KANN muss aber nicht alert() verwenden. Du könntest stattdessen ein Div einbauen, das standardmäßig keinen Inhalt hat und nicht zu sehen ist. Im Fehlerfall schreibst du den Fehler-Text da rein und lässt es nach einigen Sekunden ausblenden.

Das setzt vorraus, dass ich den Fehler abfange. In PHP ist mir das geläufig, aber wo setze ich hier an?

Code:

function ShowMsg(data) {
 if (data) {
  document.getElementById("outputAll").innerHTML = data;
 }
 else {
  {funktion}
 }
}

So in etwa?

saftmeister · 17. August 2015

Das error-Callback wird im Ajax-Call wie das success-Callback registriert. Noch mal der Verweis auf die Doku: http://api.jquery.com/jquery.ajax/ und ein kleines Beispiel:

Javascript:

$.ajax({
    url: "ajax_index.php",
    data: {jahre: arr},
    dataType: "json",
    type: "POST",
    success: function(data) {
        ShowMsg(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error(textStatus, errorThrown);
    }
});

Registrierer · 18. August 2015

Also ganz ehrlich, die Doku ist nichts für talentfreie Spaghettiprogrammierer (Das würde ich mir ausführlicher wünschen).
Nur dank Eurer Hilfe komme ich hier voran ;-)

Danke!

Mit dataType bin ich immer noch auf Kriegsfuss, denn auch mit

PHP:

header('Content-Type: application/json');
echo json_encode($_POST['jahre']);

in der ajax_index.php bekomme ich keine Anzeige, obwohl die Parameter und die Antwort in der Konsole korrekt kommt.

saftmeister · 18. August 2015

Hab es gerade mal getestet, der Code aus #7 liefert mir die richtige Anzeige. Ich habe lediglich dataType: "json" im Ajax-Call eingefügt. Mit welchem Browser testest du? Ich habe hier Chrome.

Registrierer · 19. August 2015

#7 ist von mir, ohne Datentypbestimmung.
Meinst Du #5 und #6? Das funktioniert bei mir nicht.
Ich benutze den aktuellen Feuerfuchs (Portabel).

saftmeister · 19. August 2015

Ich meine schon den Code aus #7. Zusammen mit der kurzen Version aus #13. So sieht mein Code aus:

PHP:

<!DOCTYPE html>
<html>
<head>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
    $('form').delegate('input:checkbox', 'click', anzeige);
   });
   function ShowMsg(data) {
    var response = data;
    document.getElementById("outputAll").innerHTML = response;
   }
   function anzeige(){
    var arr = $.map($('input:checkbox:checked'), function(e, i) {
     return +e.value;
   });
   $.ajax({
    url: "ajax_index.php",
    data: {jahre: arr},
    type: "POST",
    dataType: "json",
    success: function(data) {
     ShowMsg(data);
    }
   });
  }
  </script>
</head>
<body>
    <form>
        <input type="checkbox" value="2000" name="jahr[]">2000<br> <input
            type="checkbox" value="2001" name="jahr[]">2001<br> <input
            type="checkbox" value="2002" name="jahr[]">2002<br>
    </form>
    <div id="outputAll">&nbsp;</div>
</body>
</html>

- ajax_index.php

PHP:

<?php
/*
include ('datenbankverbindung.php');
if (isset($_POST['jahre']) && $_POST['jahre'] > 1999)  {
foreach ($_POST['jahre'] as $val) {
  $jahre[] = intval($val);
}
$ergebnis = $pdo->query("SELECT JAHR FROM haase_rechnungen WHERE JAHR IN (".implode(",", $jahre).") GROUP BY JAHR");
while ($ergebnis_suche = $ergebnis->fetch()) {
  echo $ergebnis_suche['JAHR']."<br>\n";
}
}
*/
header('Content-Type: application/json');
echo json_encode($_POST['jahre']);
?>

Liefert abhängig davon was angekreuzt ist, bspw wie im Anhang.

Allerdings sehe ich gerade, dass bei deiner Ausgabe HTML zurück gegeben wird. Und zwar hier:

PHP:

while ($ergebnis_suche = $ergebnis->fetch()) {
  echo $ergebnis_suche['JAHR']."<br>\n";
}

- Der Content-Type ist nicht auf application/json gesetzt sondern der Default-Type des Servers (sicherlich text/html)
- Du gibst das Ergebnis Jahr als Zeichenkette aus und hängst <br/> hinten an. Das wird sicherlich Probleme beim Parsen des JSON auf der Client-Seite (im Success-Callback des Ajax-Calls) führen.

Registrierer · 20. August 2015

Seltsam, ich hab den Quelltext kopiert um Tippfehler auszuschliessen.
Ich bekomme aber keine Ausgabe, obwohl in der Konsole alles da ist:

Code:

echo "<pre>". print_r($_POST['jahre'], true) ."</pre>";

Antwort:
<pre>Array
(
[0] => 2000
[1] => 2001
[2] => 2002
)
</pre>

Code:

echo json_encode($_POST['jahre']);

Antwort:
["2000","2001","2002"]

Und die DB Abfrage liefert: 200020012002 (ich hab sämtliches HTML entfernt wie Du gesagt hast)

Nur outputAll wird nach wie vor nicht angezeigt oder befüllt.

Ich habe jetzt mal noch in der HTML Datei im Header

Code:

<meta http-equiv="Content-Type: application/json">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

eingefügt. Bringt aber auch nichts.
Ich hänge hier meine index.php und ajax_index.php nochmal an.

PHP:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type: application/json">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type="text/javascript">
   $(document).ready(function() {
    $('form').delegate('input:checkbox', 'click', anzeige);
   });
   function ShowMsg(data) {
    document.getElementById("outputAll").innerHTML = data;
   }
   function anzeige(){
    var arr = $.map($('input:checkbox:checked'), function(e, i) {
     return +e.value;
    });
    $.ajax({
     url: "ajax_index_2.php",
     data: {jahre: arr},
     type: "POST",
     dataType: "json",
     success: function(data) {
      ShowMsg(data);
     }
    });
   }
  </script>
 </head>
 <body>
  <form>
   <input type="checkbox" value="2000" name="jahr[]">2000<br>
   <input type="checkbox" value="2001" name="jahr[]">2001<br>
   <input type="checkbox" value="2002" name="jahr[]">2002<br>
  </form>
  <div id="outputAll">&nbsp;</div>
 </body>
</html>

PHP:

<?PHP
header('Content-Type: application/json');
echo "<pre>". print_r($_POST['jahre'], true) ."</pre>";
echo json_encode($_POST['jahre']);
include ('datenbankverbindung.php');
$ergebnis = $pdo->query("SELECT JAHR FROM rechnungen WHERE JAHR IN (".implode(",", $_POST['jahre']).") GROUP BY JAHR");
while ($ergebnis_suche = $ergebnis->fetch()) {
 echo $ergebnis_suche['JAHR'];
}
?>

Das kann doch nicht sein, oder?

saftmeister · 20. August 2015

Versuch mal das hier:

PHP:

<?PHP
header('Content-Type: application/json');
include ('datenbankverbindung.php');
$ergebnis = $pdo->query("SELECT JAHR FROM rechnungen WHERE JAHR IN (".implode(",", $_POST['jahre']).") GROUP BY JAHR");

$output = array();

while ($ergebnis_suche = $ergebnis->fetch()) {
$output[] = $ergebnis_suche['JAHR'];
}

echo json_encode($output);
?>

EDIT: ~~Achso, dein Formular-Feld, was die Checkboxen benenennt, heißt "jahr" nicht "jahre". Demzufolge müsste auch in $_POST das Element "jahre" heißen und nicht "jahr".~~ Das $_POST['jahre'] kommt natürlich durch den Ajax-Call - mein Fehler.

mermshaus · 21. August 2015

Sorry, aber wie kommst du denn auf die Idee, dass so was…

PHP:

<?PHP
header('Content-Type: application/json');
echo "<pre>". print_r($_POST['jahre'], true) ."</pre>";
echo json_encode($_POST['jahre']);
// ...

…funktionieren sollte (aus #17)?

Es ist klar, dass nichts geht, wenn du in das serverseitige Script aus irgendeinem Grund ständig noch andere Ausgaben mit reinschreibst, die dann natürlich dazu führen, dass die gesamte Ausgabe kein gültiges JSON mehr ist…

Das macht es auch ziemlich schwierig, dir zu helfen, wie sich an der Länge dieses Threads für eine so verhältnismäßig triviale Aufgabe erkennen lässt.

Code:
Ich habe jetzt mal noch in der HTML Datei im Header

Code:

<meta http-equiv="Content-Type: application/json"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

eingefügt. Bringt aber auch nichts.

Wieso sollte das auch was bringen? Das hat nichts damit zu tun. Programmierung ist kein Ratespielchen.

Registrierer · 31. August 2015

Dank Eurer Hilfe und Kritik bin ich fast am Ziel, aber nur fast ;-)
Ich erwähnte am Anfang, dass ich ein Lieniendiagramm einbinden möchte und bei Aktivierung eines Kontrollkästchens die Änderung sofort sichtbar sein soll.
Das passt alles, nur will mir die Einbindung des Bildes (PHPLOT Grafik) nicht gelingen.
Die Parameter werden richtig übertragen, die Grafik erzeugt, jedoch nicht angezeigt.
Nachfolgend die Index.php, die phplot_bild.php, und die Ausgabe der Konsole.
index.php

PHP:

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type="text/javascript">
   $(document).ready(function() {
    $('form').delegate('input:checkbox', 'click', anzeige);
   });
   function anzeige() {
    var arr = $.map($('input:checkbox:checked'), function(e, i) {
     return +e.value;
    });
    $.ajax({
     url: "phplot_bild.php",
     data: {jahre: arr},
     type: "GET",
     dataType: "json",
     success: function(data) {
      ShowMsg(data);
     }
    });
   }
   function ShowMsg(data) {
    document.getElementById("outputAll").innerHTML = data;
   }
  </script>
</head>
<body>
  <form>
   <input type="checkbox" value="2000" name="jahr[]" id="jahr">2000<br>
   <input type="checkbox" value="2001" name="jahr[]" id="jahr">2001<br>
   <input type="checkbox" value="2002" name="jahr[]" id="jahr">2002<br>
  </form>
  <div id="outputAll">&nbsp;</div>
</body>
</html>

phplot_bild.php

PHP:

<?php
require_once 'datenbankverbindung.php'; // DB Verbindung
require_once 'phplot.php'; // phplot
require_once 'zeit_waehr_func.php'; // für die Monatsnamen

$sum = $pdo->query("SELECT JAHR, MONAT,
                    if(JAHR < 2002,
                     SUM(ROUND(SUMME_NE*0.511292,0)),
                     SUM(ROUND(SUMME_NE,0))
                    ) as SUMME
                    FROM ".$rechnung."
                    WHERE JAHR IN (".implode(",", $_REQUEST['jahre']).")
                    GROUP BY MONAT, JAHR");

while($summen = $sum->fetch()) {
$daten[$summen['MONAT']-1][]  = $summen['SUMME'];
$jahre[$summen['JAHR']]  = 'Jahr '.$summen['JAHR'];
}

$i  = 0;
foreach($daten as $unterarray) {
array_unshift($unterarray,strval(utf8_decode ($Monatsname[$i++])));
$daten_neu[]  = $unterarray;
foreach($unterarray as $maxarray)  {
  $sort[] = $maxarray;
}
}

$diagramm =& new PHPlot(400,300);
$diagramm->SetDataValues($daten_neu);
json_encode($diagramm->DrawGraph());
?>

✔ Wie benutzt man jQuery’s $.ajax() Funktion

Registrierer

Erfahrenes Mitglied

saftmeister

Nutze den Saft!

Registrierer

Erfahrenes Mitglied

saftmeister

Nutze den Saft!

Registrierer

Erfahrenes Mitglied

saftmeister

Nutze den Saft!

Anhänge

Registrierer

Erfahrenes Mitglied

saftmeister

Nutze den Saft!

mermshaus

Erfahrenes Mitglied

Registrierer

Erfahrenes Mitglied

Anhänge

Neue Beiträge