tutorial peticiones form ejemplo javascript ajax google-app-engine python-2.7 app-engine-ndb

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>

  • ajaxScript función de JavaScript ajaxScript :

    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.py maneja el lado del servidor de la empresa utilizando nuestra clase de controlador AjaxHandler , que hereda de la clase incorporada GAE webapp2.RequestHandler

  • Dentro de esta clase, el método de post maneja 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 json proporciona los dos ingredientes clave de Python

    • json.loads maneja los datos que el navegador envía al servidor.
    • json.dumps maneja los datos enviados por el servidor en respuesta a la solicitud del navegador.
    • El argumento self.request.body de json.loads es 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.