如何像提交表单一样使用 ajax 进行 POST？答案

【问题标题】：How to make a POST with ajax just like the form submit?如何像提交表单一样使用 ajax 进行 POST？
【发布时间】：2016-08-20 17:10:04
【问题描述】：

我正在尝试使用 Ajax 向我的 python (Google App Engine) 服务器发送 POST 请求，就像我们从表单提交中所做的那样，但它不起作用。

这是我的 HTML：

<!DOCTYPE html>

<html>
 <head>
 <title>Test</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
  <button>apple</button>
  <form method="POST" action="/">
  <input name="url" value="value1" id="urlimg">
  <br>
  <input class="myButton" type="submit" value="FIND OUT" id="submit_button">
  </form>
  <script type="text/javascript">
     $(document).ready(function(){
       $('button').click(function() {
          $.post('/', { url: 'value1'});
       });
    });
  </script>
</body>
</html>

这是我的python代码：

import os
import webapp2
import jinja2
import urllib2 as urllib

template_dir = os.path.join(os.path.dirname(__file__), '')
jinja_env = jinja2.Environment(loader = jinja2.FileSystemLoader(template_dir),
                           autoescape = True)

class Handler(webapp2.RequestHandler):
    def write(self,*a,**kw):
        self.response.write(*a,**kw)

    def render_str(self,template,**params):
        t = jinja_env.get_template(template)
        return t.render(params)

    def render(self,template,**kw):
        self.write(self.render_str(template,**kw))

class MainHandler(Handler):
    def get(self):
        self.render('image.html')
    def post(self):
        url = self.request.get('url')
        self.response.write(url + ' is your url')
app = webapp2.WSGIApplication([
('/', MainHandler)
], debug=True)

【问题讨论】：

您期望发生什么？
“它不工作”是什么意思？
当我提交上面的表单时，它会在屏幕上显示输入，但是当我使用脚本发送帖子时它什么也没做。
但是你想让它做什么呢？
试试：<button id="button">apple</button>

标签： javascript jquery python ajax google-app-engine

【解决方案1】：

您应该将响应作为 JSON 对象返回：

class MainHandler(Handler):
    def get(self):
        self.render('image.html')
    def post(self):
        import json

        url = self.request.get('url')

        response_dict = {
            'message': 'Yay, I did it!', 
            'url': url + ' is your url',
        } 

        self.response.headers['Content-Type'] = 'application/json'
        self.response.out.write(json.dumps(response_dict))

并因此处理模板中的响应：

$("button").click(function(){
    $.post("/", { url: $('#urlimg').val()}, function(data, status){
        alert("message: " + data.message + "\nURL: " + data.url + "\nStatus: " + status);
    });
});

【讨论】：