如何在Brython中使用ajax

如何在Brython中使用ajax,ajax,brython,Ajax,Brython,我正在使用Flask编写一个web应用程序,希望使用Brython中的browser.ajax功能,但找不到可行的示例。如果有人演示如何在Brython中使用ajax,那将非常好。更具体地说,如何通过单击提交按钮将用户输入的数据传递到文本字段和文本区域。非常感谢您的帮助 (我在发布上述问题几个星期后写下这篇文章)。我按照本教程介绍了如何在Flask()中实现ajax,并尝试用Brython替换jquery.ajax。不幸的是,我仍然无法让它工作。这是我的密码: 烧瓶部分: @app.route

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


(我在发布上述问题几个星期后写下这篇文章)。我按照本教程介绍了如何在Flask()中实现ajax,并尝试用Brython替换jquery.ajax。不幸的是,我仍然无法让它工作。这是我的密码:

烧瓶部分:

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

从浏览器将文档导入为文档
从浏览器导入ajax
def on_完成(需要):
如果请求状态==200或请求状态==0:
doc[“txt_区域”].html=req.text
其他:
doc[“txt_area”].html=“error”+req.text
def get(url):
req=ajax.ajax()
a=单据['a'].值
b=单据['b'].值
请求绑定(“完成”,在完成时)
请求打开('GET',url,True)
请求集标题('content-type','application/x-www-form-urlencoded')
请求发送({“a”:a,“b”:b})
doc['calculate'].bind('click',lambda ev:get('/\u add\u number'))
如何管理JSON请求

+ =

我得到的是“结果”:0。看起来brython没有向Flask的view函数发送数据,但我不知道如何解决这个问题。因此,如果有人能指出我到底做错了什么,那就太好了。

我正在研究这个问题——没有现成的东西,但是编写Python代码确实让它变得轻松

我无法发布我正在处理的代码(这远远不是最简单的),但基本上,您可以编写一个(Br)Python函数来迭代HTML,或者
表单
DOM,并在json nish结构中收集所有具有“值”的内容(一个包含嵌套字典和任意列表的字典)-您只需使用中记录的browser.ajax对象,并将对象和数据作为参数传递给“send”方法

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

作为额外提示: 我没有深入讨论这个问题,但我觉得默认情况下使用的URL编码可能无法在JSON中表达所有可能的内容。因此导入了brython的json模块,并按如下方式发送:

ajax\u object.send({“data”:json.dumps(json\u data)})

这允许我在客户端执行以下操作:
json\u data=json.load(urllib.unquote(request.body).split(“:”,1)[-1])


(request.body来自金字塔-对于flask,它是“request.data”,但只有当flask-check不理解content类型时才是如此)

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

布莱顿代码应为:

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请求,并且获得具有属性“form”而不是“args”的参数:


非常感谢您的回复。我刚刚更新了我的问题,加入了一个烧瓶/brython样品。仍然无法让它工作。非常感谢!它起作用了!我唯一的问题是:我是否需要在查询字符串中手动包含参数(在本例中为“?a=%s&b=%s”),或者可以自动完成?再次感谢!你应该更喜欢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)