如何在 Brython 中使用 ajax答案

【问题标题】：How to use ajax in Brython如何在 Brython 中使用 ajax
【发布时间】：2014-09-24 16:10:24
【问题描述】：

我正在使用 Flask 编写一个 Web 应用程序，并希望在 Brython 中使用 browser.ajax 功能，但找不到可行的示例。如果有人演示一个如何在 Brython 中使用 ajax 的简短示例，那就太好了。更具体地说，如何通过单击提交按钮将用户输入到文本字段中的数据传递到文本区域。非常感谢任何帮助！

（我在发布上述问题几周后写这篇文章）。我按照本教程介绍了如何在 Flask (http://runnable.com/UiPhLHanceFYAAAP/how-to-perform-ajax-in-flask-for-python) 中实现 ajax，并尝试用 Brython 替换 jquery.ajax。不幸的是，我仍然无法让它工作。这是我的代码：

Flask 的部分：

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/_add_numbers')
def add_numbers():
    a = request.args.get('a', 0, type=int)
    b = request.args.get('b', 0, type=int)
    return jsonify(result=a + b)

布莱顿/HTML：

 <body onload="brython()">
 <script type="text/python">
 from browser import document as doc
 from browser import ajax

def on_complete(req):
    if req.status==200 or req.status==0:
        doc["txt_area"].html = req.text
    else:
        doc["txt_area"].html = "error "+req.text

def get(url):        
    req = ajax.ajax()
    a = doc['A'].value        
    b = doc['B'].value
    req.bind('complete',on_complete)
    req.open('GET',url,True)
    req.set_header('content-type','application/x-www-form-urlencoded')
    req.send({"a": a, "b":b})      

doc['calculate'].bind('click',lambda ev:get('/_add_numbers'))

</script>

<div class="container">
  <div class="header">
    <h3 class="text-muted">How To Manage JSON Requests</h3>
  </div>
  <hr/>
  <div>
  <p>
<input type="text" id="A" size="5" name="a"> +
<input type="text" id ="B" size="5" name="b"> =
<textarea type="number" class="form-control" id="txt_area" cols="10" rows = '10'></textarea>
<p><a href="javascript:void();" id="calculate">calculate server side</a>

  </div>
 </div>
 </body>
</html>

我得到的是“结果”：0。看起来 brython 没有将数据发送到 Flask 的视图函数，但我不知道如何解决这个问题。所以，如果有人能指出我到底做错了什么，那就太好了。

【问题讨论】：

标签： ajax brython

【解决方案1】：

在您的示例中，Ajax 请求使用 GET 方法发送。在这种情况下，send() 的参数被忽略：数据必须在附加到 url 的查询字符串中发送

Brython 代码应该是：

def get(url):        
    req = ajax.ajax()
    a = doc['A'].value        
    b = doc['B'].value
    req.bind('complete',on_complete)
    # pass the arguments in the query string
    req.open('GET',url+"?a=%s&b=%s" %(a, b),True)
    req.set_header('content-type','application/x-www-form-urlencoded')
    req.send()

如果你想使用 POST 方法，那么你可以保持 Brython 代码原样，但 Flask 代码应该修改：你必须指定函数处理 POST 请求，并且你得到带有属性的参数 "形式”而不是“参数”：

@app.route('/_add_numbers_post', methods=['POST'])
def add_numbers_post():
    a = request.form.get('a', 0, type=int)
    b = request.form.get('b', 0, type=int)
    return jsonify(result = a+b)

【讨论】：

非常感谢！有用！我唯一的问题是：我是否需要在查询字符串中手动包含参数（在这种情况下为“？a=%s&b=%s”），或者它可以以某种方式自动完成？再次，非常感谢！
你应该更喜欢 Post 方法。无论哪种方式，是的，必须“手动”包含参数 - 浏览器只“知道”收集表单值并在重新加载整个页面的事件中提交它们。
有人知道如何设置标题吗？我需要正确设置标题：developer.oxforddictionaries.com

【解决方案2】：

我正在努力解决这个问题 - 没有现成的东西，但编写 Python 代码真的很轻松。

我无法发布我正在处理的代码，（而且它远非最小） - 但基本上，您编写一个 (Br)Python 函数来迭代 HTML 或 form DOM，然后收集所有内容在 json-nish 结构中具有“值”（具有嵌套字典和列表的字典） - 您只需使用 http://brython.info/doc/en/index.html# 中记录的 browser.ajax 对象，并将对象与您的数据一起作为参数传递到“发送”方法。

对象数据将在请求正文中进行 URL 编码。您只需在客户端将其从那里解码为 JSON。

作为一个额外的提示：我没有深入探讨这个问题，但我觉得默认使用的 URLencoding 可能无法表达 JSON 中可能的所有内容。所以导入了 brython 的 json 模块，然后像这样发送：

ajax_object.send({"data": json.dumps(json_data)})

这允许我在客户端执行此操作： json_data = json.loads(urllib.unquote(request.body).split(":",1)[-1] )

（“request.body”来自 Pyramid - 对于烧瓶来说是“request.data”，但前提是烧瓶不理解 conte-type - 检查How to get data received in Flask request）

【讨论】：

非常感谢您的回复。我刚刚通过包含 Flask/brython 示例更新了我的问题。仍然无法正常工作。