Question

我正在使用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)

Brython / 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>

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

Answer 1

在您的示例中，使用方法GET发送Ajax请求。在这种情况下，将忽略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请求，并获得带有属性＆的参数＃34;形式＆＃34;而不是＆＃34; args＆＃34; ：

@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)

Answer 2

我正在努力 - 没有任何现成的东西，但编写Python代码使它真的很轻松。

我无法发布我正在处理的代码（并且它远非最小化） - 但基本上，您编写了一个（Br）Python函数来迭代HTML或form DOM ，并收集所有具有＆＃34;值＆＃34;在一个json-nish结构（一个带有嵌套的dicionaries和列表的字典） - 你只需使用http://brython.info/doc/en/index.html#中记录的browser.ajax对象，并将带有数据的对象作为参数传递给＆＃ 34;发送＆＃34;方法

对象数据将在请求正文中进行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] )

（＆＃34; request.body＆＃34;来自金字塔 - 对于烧瓶，它是＆＃34; request.data＆＃34;，但只有当烧瓶不理解conte-type时 - 检查{ {3}}）

如何在Brython中使用ajax

2 个答案: