ajax-form-http-post-gae

#https://siongui.github.io/2012/07/24/ajax-form-http-post-gae-python/

#app.yaml

application: ajax-form-post-gae-python
version: 1
runtime: python27
api_version: 1
threadsafe: true

handlers:
- url: /
  static_files: index.html
  upload: index.html

- url: /post.js
  static_files: post.js
  upload: post.js

- url: /post
  script: post.application


#post.py

#!/usr/bin/env python
# -*- coding:utf-8 -*-

import webapp2
import urllib2


class PostPage(webapp2.RequestHandler):
  def post(self):
    input1 = urllib2.unquote(self.request.get('input1'))
    input2 = urllib2.unquote(self.request.get('input2'))

    self.response.out.write("input1: %s\ninput2: %s" % (input1, input2))


application = webapp2.WSGIApplication([
    ('/post', PostPage),
], debug=True)


#post.js

/**
 * Cross-browser HTTP POST request
 * @param {string} url The url of HTTP POST request
 * @param {object} keyValuePairs The object which contains data of key-value
 *                 pair(s) to be POSTed. For example, object {'name': 'Bob',
 *                 'age': '21'} represents "name=Bob&age=21".
 * @param {function} callback The callback function if HTTP POST succeeds
 * @param {function} failCallback The callback function if HTTP POST fails
 */
HTTPPOST = function(url, keyValuePairs, callback, failCallback) {
  var xmlhttp;

  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else {
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {
      if (xmlhttp.status == 200)
        callback(xmlhttp.responseText, url);
      else
        failCallback(url);
    }
  };

  xmlhttp.open("POST", url, true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  var kvpairs = '';
  for (var key in keyValuePairs) {
    if (kvpairs == '')
      kvpairs = encodeURIComponent(key) + '=' +
                encodeURIComponent(keyValuePairs[key]);
    else
      kvpairs = kvpairs + '&' + encodeURIComponent(key) + '=' +
                encodeURIComponent(keyValuePairs[key]);
  }

  xmlhttp.send(kvpairs);
};


function ajaxformpost() {
  var keyValuePairs = {
    'input1': document.getElementById('input1').value,
    'input2': document.getElementById('input2').value
  };

  var callback = function(responseText, url) {
    alert('responseText from url ' + url + ':\n'
          + responseText);
  };

  var failCallback = function(url) {
    // write your own handler for failure of HTTP POST
    alert('fail to post ' + url);
  }

  HTTPPOST("/post", keyValuePairs, callback, failCallback);
}


#index.html


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>AJAX HTML Form POST on Google App Engine Python example</title>
</head>
<body>

<form action="javascript:ajaxformpost();">
  <input id="input1" type="text" size='110'
     value="<example1>用 HashMap &lt Name, LinkedList &lt NameDistancePair &gt &gt 的 Java data structure 畫出此 directed weighted graph。</example1>">
  <br />
  <input id="input2" type="text" size='110'
     value="<example2>用 HashMap &lt Name, LinkedList &lt NameDistancePair &gt &gt 的 Java data structure 畫出此 directed weighted graph。</example1>">
  <br />
  <input type="submit" value="Submit">
</form>

<script src="post.js"></script>
</body>
</html>