dynamische html Seite mit Ajax

Django, Flask, Bottle, WSGI, CGI…
erdmulch
User
Beiträge: 230
Registriert: Samstag 17. Juli 2010, 19:50

und wo muss ich das machen?
ich kann es doch nicht einfach so einfügen:

Code: Alles auswählen

function loadContent()
{
 
    xmlHttpObject.open('post'> {% csrf_token %} "{% url /home/peter/tmp/djangoprojs/Wetterstation/Wetterstation/articles.views.index %} ", true);
    xmlHttpObject.onreadystatechange = handleContent();
    xmlHttpObject.send(null);
    return false;
}
Sirius3
User
Beiträge: 17754
Registriert: Sonntag 21. Oktober 2012, 17:20

dann heißt es für Dich, dass Du Dich erstmal mit dem Senden von Parametern bei
Deinem xmlHttpObjekt vertraut machst. Oder noch grundlegender, wann Du einen
POST und wann einen GET-Request benutzen sollst.
Für den von Dir gezeigten Anwendungsfall, nimm GET!!!
erdmulch
User
Beiträge: 230
Registriert: Samstag 17. Juli 2010, 19:50

wie gesagt, er kommt immer noch folgende Fehlermeldung im meinem Browser, da ich nicht mehr weiter weiß wäre ich für eine Lösung sehr dankbar.

Code: Alles auswählen

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="robots" content="NONE,NOARCHIVE">
<title>403 Forbidden</title>
<style type="text/css">
html * { padding:0; margin:0; }
body * { padding:10px 20px; }
body * * { padding:0; }
body { font:small sans-serif; background:#eee; }
body>div { border-bottom:1px solid #ddd; }
h1 { font-weight:normal; margin-bottom:.4em; }
h1 span { font-size:60%; color:#666; font-weight:normal; }
#info { background:#f6f6f6; }
#info ul { margin: 0.5em 4em; }
#info p, #summary p { padding-top:10px; }
#summary { background: #ffc; }
#explanation { background:#eee; border-bottom: 0px none; }
</style>
</head>
<body>
<div id="summary">
<h1>Forbidden <span>(403)</span></h1>
<p>CSRF verification failed. Request aborted.</p>
</div>
<div id="info">
<h2>Help</h2>
<p>Reason given for failure:</p>
<pre>
CSRF cookie not set.
</pre>
<p>In general, this can occur when there is a genuine Cross Site Request Forgery, or when
<a
href='http://docs.djangoproject.com/en/dev/ref/contrib/csrf/#ref-contrib-csrf'>Django's
CSRF mechanism</a> has not been used correctly. For POST forms, you need to
ensure:</p>
<ul>
<li>Your browser is accepting cookies.</li>
<li>The view function uses <a
href='http://docs.djangoproject.com/en/dev/ref/templates/api/#subclassing-context-requestcontext'><code>RequestContext</code></a>
for the template, instead of <code>Context</code>.</li>
<li>In the template, there is a <code>{% csrf_token
%}</code> template tag inside each POST form that
targets an internal URL.</li>
<li>If you are not using <code>CsrfViewMiddleware</code>, then you must use
<code>csrf_protect</code> on any views that use the <code>csrf_token</code>
template tag, as well as those that accept the POST data.</li>
</ul>
<p>You're seeing the help section of this page because you have <code>DEBUG =
True</code> in your Django settings file. Change that to <code>False</code>,
and only the initial error message will be displayed. </p>
<p>You can customize this page using the CSRF_FAILURE_VIEW setting.</p>
</div>
</body>
</html> 
erdmulch
User
Beiträge: 230
Registriert: Samstag 17. Juli 2010, 19:50

gibts unter django 1.2.3 auch so Probleme? sonst steig ich um!
Sirius3
User
Beiträge: 17754
Registriert: Sonntag 21. Oktober 2012, 17:20

es ist wirklich frustrierend, wenn man hier Zeit inverstiert, um Fragen zu beantworten und
die einzige Reaktion ist, dass die Frage unreflektiert nochmals gestellt wird.
Gerade bei so komplexen Themen wie Web-Programmierung, wo viele verschiedene
Programme perfekt zusammenspielen müssen, kommt man um ein grundlegendes
Verständnis von HTTP, HTML, Javascript und Python nicht drumrum.
Es ist keine Schande, eine unserer Antworten nicht auf anhieb zu verstehen.
Es gibt halt bestimmte Fachbegriffe, die die Verständigung einfacher machen, weil
nicht jedesmal eine Seitenlange Erklärung geschrieben werden muß. Nachfragen
hilft aber, und wir erklären normalerweise einen unverstandener Begriff gerne auch
ausführlich.
Keiner Reaktion heißt aber, der Fragesteller ist an einem Lernprozess gar nicht interessiert.
Wir sind hier aber keine Programmierknechte, die jedes Problem mit einem fertigen
Skript beantworten.
Es ist echt frustrierend.

Schöne Weihnachten
Sirius
apollo13
User
Beiträge: 827
Registriert: Samstag 5. Februar 2005, 17:53

erdmulch hat geschrieben:gibts unter django 1.2.3 auch so Probleme? sonst steig ich um!
Es gibt für dich in jeder Django Version solche "Probleme" -- wenn du nicht tust was man dir sagt werden die auch nicht mal eben verschwinden.
BlackJack

@erdmulch: Die Probleme liegen nicht in der Django-Version, sondern in der Benutzer-Version. Schau mal ob es eine neue, bessere erdmulch-Version gibt und installiere die. ;-)
erdmulch
User
Beiträge: 230
Registriert: Samstag 17. Juli 2010, 19:50

das Problem ist einfach, das ich gerade nicht weis wo ich ansetzen soll, da ich keinerlei Erfolgserlebnisse habe.
Ich weis acu gar nicht was ich falsch mache. ich ändere es so wie es beschrieben wird, jedoch ohne erfolg. ich glaub es muss noch was geändert werden aber ich hab kein plan was...
Im Prinzip will ich nur wenn man einen Button drückt, dass dann die Seite neu geladen wird.
Ich habe mir auch schon die Django doku angeschaut, die auch sehr gut ist. aber ich vermisse ein praktisches beispiel bei dem eine html seite aktualisiert ohne, dass ein request durchgeführt wird
für ein gutes Buch, wäre ich auch sehr dankbar
Sirius3
User
Beiträge: 17754
Registriert: Sonntag 21. Oktober 2012, 17:20

Ohne request kann keine Seite aktualisiert werden. Weil request bedeutet:
Browser schickt Anfrage an Server und Server antwortet.

Welcher der folgenden Vorschläge hast Du also ohne Erfolg umgesetzt?

Code: Alles auswählen

function loadContent() {
    xmlHttpObject.open('post', "{% url /home/peter/tmp/djangoprojs/Wetterstation/Wetterstation/articles.views.index %}", true);
    xmlHttpObject.onreadystatechange = handleContent();
    xmlHttpObject.send("csrfmiddlewaretoken={{csrf_token}}");
    return false;
}
oder

Code: Alles auswählen

function loadContent() {
    xmlHttpObject.open('get', "{% url /home/peter/tmp/djangoprojs/Wetterstation/Wetterstation/articles.views.index %}", true);
    xmlHttpObject.onreadystatechange = handleContent();
    xmlHttpObject.send();
    return false;
}
erdmulch
User
Beiträge: 230
Registriert: Samstag 17. Juli 2010, 19:50

sorry, dass ich mich erst jetzt melde, aber ich musste zu meinen Enkeln.
Ich habe es immer nach deinem 2ten Beispiel gemacht:

Code: Alles auswählen

function loadContent() {
    xmlHttpObject.open('get', "{% url /home/peter/tmp/djangoprojs/Wetterstation/Wetterstation/articles.views.index %}", true);
    xmlHttpObject.onreadystatechange = handleContent();
    xmlHttpObject.send();
    return false;
}
sobald ich den Server mit folgendem Befehl starte und die I-Net Seite aufrufe kommt folgende Meldung

Code: Alles auswählen

peter@peter-desktop:~/tmp/djangoprojs/Wetterstation$ python manage.py runserver 0.0.0.0:9090
Validating models...

0 errors found
Django version 1.4.2, using settings 'Wetterstation.settings'
Development server is running at http://0.0.0.0:9090/
Quit the server with CONTROL-C.
/usr/local/lib/python2.6/dist-packages/Django-1.4.2-py2.6.egg/django/template/defaulttags.py:1235: DeprecationWarning: The syntax for the url template tag is changing. Load the `url` tag from the `future` tag library to start using the new behavior.
  category=DeprecationWarning)

meine html Seite sieht wie folgt aus:

Code: Alles auswählen

<html>
<body>
<p id="myContent">
<ul>
{% for article in latest_articles_list %}
  <li>
     <p href="/articles/{{ article.id }}/">
      {{ article.title }}
     </p>
  </li>
{%endfor%}
</ul>
</p>
  <input type="button" name="Text 1" value="Text 1 anzeigen" onclick="loadContent();">
</body>
</html>
{% endblock %}
Im Prinzip ist es eine Seite bei dem die letzten 5 Datenbankeinträge angezeigt werden
darunter ist ein Button bei dem ich die Datensätze aktualisieren will, sobald ich diesen drücke. Bisher hab ich es wie gesagt mit dieser Funktion probiert, was aber nicht funktioniert hat

Code: Alles auswählen

function loadContent() {
    xmlHttpObject.open('get', "{% url /home/peter/tmp/djangoprojs/Wetterstation/Wetterstation/articles.views.index %}", true);
    xmlHttpObject.onreadystatechange = handleContent();
    xmlHttpObject.send();
    return false;
}

auch der 2te Code hat nicht funktioniert mit der selben Fehlermeldung beim starten des Servers und aufrufen der Seite. Jetzt bin ich mir nicht sicher ob ich noch etwas installieren muss. das würde auch erklären warum es bei mir nicht funktioniert obwohl ich keinen Fehler feststellen kann.
BlackJack

@erdmulch: Das ist nur eine Warnung. Es steht eigentlich genug Information da was man machen muss um die weg zu bekommen, aber die ist letztendlich (noch) kein Problem.
Sirius3
User
Beiträge: 17754
Registriert: Sonntag 21. Oktober 2012, 17:20

@erdmulch: Der django-Server tut fehlerfrei, da ja die Startseite ausgeliefert wird.
Da Du Deine logs unvollständig postest, kann es natürlich sein, dass beim Ajax-Request
doch was schief läuft. Die Fehlermeldung die django dann liefert, müsste aber genauso
wie der csrf-Verification-Fehler irgendwo auftauchen.

Lies nochmal die Vorschläge irgendwo weiter oben, zum Debuggen bei Web-Programmierung:
In den Javascript-Entwicklertools des Browsers nach Fehlermeldungen sowie nach gesendeten
und empfangenen Daten schauen. Javascript-Fehler werden vom Browser meistens völlig
geräuschlos verschluckt.
erdmulch
User
Beiträge: 230
Registriert: Samstag 17. Juli 2010, 19:50

ok, ich habe gerade die Seite mit dem google chrome gedebuggt
dabei hält er an folgender Zeile an nachdem ich auf den Button klicke um die Daten zu aktualisieren:
xmlHttpObject.send();
In dem Object stehen folgende Attribute mit diesen Werten:

Code: Alles auswählen

XMLHttpRequest
onabort: null
onerror: null
onload: null
onloadend: null
onloadstart: null
onprogress: null
onreadystatechange: null
readyState: 1
response: ""
responseText: ""
responseType: ""
responseXML: null
status: [Exception: DOMException]
statusText: [Exception: DOMException]
upload: XMLHttpRequestUpload
withCredentials: false
__proto__: XMLHttpRequest
Leider kann ich damit nichts anfangen. Aber was ich gesehen habe sieht nicht allzu schlecht aus

dann wünsche ich noch ein schönes Weihnachtsfest

lg
Sirius3
User
Beiträge: 17754
Registriert: Sonntag 21. Oktober 2012, 17:20

wenn ich raten müßte (oh, hier im Forum sollte jeder beim Anmelden eine Kristallkugel
zum Downloaden geschenkt bekommen), würde ich sagen, eine Zeile drüber müßte es

Code: Alles auswählen

xmlHttpObject.onreadystatechange = handleContent;
heißen.
erdmulch
User
Beiträge: 230
Registriert: Samstag 17. Juli 2010, 19:50

Hallo,

es hat funktioniert :-)
vielen Dank, es lag echt an den Klammern
bin nun total happy
Antworten