javascript - peticiones - Cómo usar AJAX con Google App Engine(Python)
login ajax django (2)
Ok señor aquí vamos ... Una aplicación simple con una historia y votos infinitos ... ;-)
app.yaml
application: anotherappname
version: 1
runtime: python27
api_version: 1
threadsafe: true
default_expiration: "0d 0h 5m"
libraries:
- name: jinja2
version: latest
- name: webapp2
version: latest
handlers:
- url: .*
script: main.app
main.py
import logging
from controllers import server
from config import config
import webapp2
app = webapp2.WSGIApplication([
# Essential handlers
(''/'', server.RootPage),
(''/vote/'', server.VoteHandler)
],debug=True, config=config.config)
# Extra Hanlder like 404 500 etc
def handle_404(request, response, exception):
logging.exception(exception)
response.write(''Oops! Naughty Mr. Jiggles (This is a 404)'')
response.set_status(404)
app.error_handlers[404] = handle_404
models/story.py
from google.appengine.ext import ndb
class Story(ndb.Model):
title = ndb.StringProperty(required=True)
vote_count = ndb.IntegerProperty(default = 0)
controllers/server.py
import os
import re
import logging
import config
import json
import webapp2
import jinja2
from google.appengine.ext import ndb
from models.story import Story
class RootPage(webapp2.RequestHandler):
def get(self):
story = Story.get_or_insert(''Some id or so'', title=''A voting story again...'')
jinja_environment = self.jinja_environment
template = jinja_environment.get_template("/index.html")
self.response.out.write(template.render({''story'': story}))
@property
def jinja_environment(self):
jinja_environment = jinja2.Environment(
loader=jinja2.FileSystemLoader(
os.path.join(os.path.dirname(__file__),
''../views''
))
)
return jinja_environment
class VoteHandler(webapp2.RequestHandler):
def post(self):
logging.info(self.request.body)
data = json.loads(self.request.body)
story = ndb.Key(Story, data[''storyKey'']).get()
story.vote_count += 1
story.put()
self.response.out.write(json.dumps(({''story'': story.to_dict()})))
y finalmente
views/index.html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<h2>{{story.title}}</h2>
<div>
<span class="voteCount">{{story.vote_count}}</span> | <a href="javascript:VoteUp(''{{story.key.id()}}'');" >Vote Up Story</a>
</div>
<script>
function VoteUp(storyKey){
$.ajax({
type: "POST",
url: "/vote/",
dataType: ''json'',
data: JSON.stringify({ "storyKey": storyKey})
})
.done(function( data ) { // check why I use done
alert( "Vote Cast!!! Count is : " + data[''story''][''vote_count''] );
$(''.voteCount'').text(data[''story''][''vote_count'']);
});
};
</script>
</body>
</html>
Ensamblar, leer es lo suficientemente simple y ejecutar. Si necesitas un ejemplo de git que funcione, solo comenta.
githublink (a partir de los comentarios)
Soy completamente novato en AJAX. Estoy familiarizado con HTML / CSS, jQuery y principiante en GAE y Python.
En un esfuerzo por comprender cómo funciona AJAX, me gustaría saber cómo se podría utilizar AJAX (código real) en este ejemplo a continuación. Usemos un ejemplo de reddit donde los aumentos / bajadas de votos son ajaxificados:
Aquí está el tipo de historia:
class Story(ndb.Model):
title = ndb.StringProperty(required = True)
vote_count = ndb.IntegerProperty(default = 0)
El HTML se vería así:
<h2>{{story.title}}</h2>
<div>
{{story.vote_count}} | <a href="#">Vote Up Story</a>
</div>
¿Cómo encaja AJAX aquí?
Aquí hay una pequeña aplicación web prototipo en GitHub para probar cómo manejar mensajes de error en presentaciones de formularios HTML con AJAX, Python y Google App Engine. Dará un punto de partida para ver cómo estas tres piezas de tecnología se unen. Puede probar esta "aplicación" en https://ajax-prototype.appspot.com/
Así es como funciona en el lado del cliente:
Este formulario htlm se utiliza:
<form method="post" action="javascript:ajaxScript();"> <label>Please pick a name</label> <input id="input" type="text"> <input type="submit"> <div id="error" style="color:red"></div>ajaxScriptfunción de JavaScriptajaxScript:function ajaxScript() { var input = $("#input").val(); $.ajax({ type: "POST", url: "/", data: JSON.stringify({ "name": input }), dataType: "json" }) .done(function(jsonResponse) { $("#error").html(jsonResponse.message); }); }El método jQuery
.ajax()maneja la solicitud mientras que el método.done()eventualmente manejará la respuesta que recibe del servidor.
En el lado del servidor:
El archivo
main.pymaneja el lado del servidor de la empresa utilizando nuestra clase de controladorAjaxHandler, que hereda de la clase incorporada GAEwebapp2.RequestHandlerDentro de esta clase, el método de
postmaneja la solicitud AJAX:def post(self): data = json.loads(self.request.body) username = data["name"] if not re.match(r"^[a-zA-Z0-9_-]{3,20}$", username): if len(username) < 3: message = "Your name must be at least 3 characters long." else: message = "Allowed characters are / a-z, A-Z, 0-9, underscores / and hyphens." else: message = "Congrats!" self.response.write(json.dumps({"message": message}))Básicamente, el práctico módulo
jsonproporciona los dos ingredientes clave de Python-
json.loadsmaneja los datos que el navegador envía al servidor. -
json.dumpsmaneja los datos enviados por el servidor en respuesta a la solicitud del navegador. - El argumento
self.request.bodydejson.loadses la única pieza de GAE menos común que se utiliza en el proceso, ya que es específico de la tarea. Como su nombre lo sugiere, obtiene el cuerpo de la solicitud Ajax enviada por el cliente.
-