Flask - 让JavaScript和Python进行通信

时间:2015-06-15 17:07:27

标签: javascript python json flask

我正在使用Flask Python框架构建一个相当简单的CRM。我有一个我们有兴趣联系的公司数据库。用户首先输入他们想要联系的公司数量。然后,用户将被重定向到此页面:

CRM First Screen

对于此页面上的每一行/公司,用户将单击联系人或不联系单选按钮。

我想要实现的目标

一旦用户点击底部的“让魔术发生”按钮,JavaScript就会遍历每一行并看到点击了哪个按钮。然后,它将数据库唯一ID附加到两个数组之一,“contact”和“remove”。然后通过getJSON将此信息传递给python,python使用request.args.get捕获json数据。

最后,Python做了两件事之一:

  • 对于remove数组中的公司,它会更改相应数据库实例中的bool值
  • 对于联系人阵列中的公司,它运行一个单独的功能,该功能使用SMTP向该公司发送电子邮件

我挂断的地方

我似乎无法在Python中检索json数据,我现在正试图做一个简单的print语句,以表明我可以提取数据。

另外,在性能方面,将javascript单独发送到python还是一次发送到数组中会更有效吗?

脚本

app.py

C=cell(1,3)
for ix=1:numel(C),C{ix}=eval(sprintf('data%d',ix));end

email.js

@app.route('/send_emails')
def send_emails():
  contact = request.args.get('contact')
  remove = request.args.get('remove')

  print contact
  print remove

  return ('', 204) #No need to return anything

batch.html

$('#batch-page .magic-button').click( function() {

  //Iterate over each company row
  $('#batch-page table tr.company-row').each(function(i, company){
    company = $(company);
    company_id = company.attr('class').split(' ')[1];

    //Assign arrays for emailing and removing comapnies
    var contact = [];
    var remove = [];

    //Check to see whether the contact or don't contact checkbox is checked
    if(company.children('td.contact-company').children('input').is(':checked')) {
      contact.push(company_id);
    } else if (company.children('td.remove-company').children('input').is(':checked')) {
      remove.push(company_id);
    }

    //Pass the data along to Python
    $.getJSON('/send_emails', {
      contact: contact,
      remove: remove
    });
  });
  $('div#batch-page').html('<p>Be patient, contacting companies!</p>');
});

更新#1

尝试使用json模块中的load方法加载请求,我收到以下错误消息:

  {% for company in companies %}
    <tr class="company-row {{ company.id }}">
      <td class="company-name">
        <p>{{ company.company_name }}</p>
      </td>
      <td class="company-website">
        <div>
          <a href="{{ company.website }}" target="blank_">{{ company.website }}</a>
        </div>
      </td>
      <td class="company-email">
        <p>{{ company.email_address }}</p>
      </td>
      <td class="contact-company">
        <input type="checkbox" class="contact" for='{{ company.id }}'>
      </td>
      <td class="remove-company">
        <input type="checkbox" class="dont-contact" for='{{ company.id }}'></td>
      <td>
        <a class="btn btn-primary" data-toggle="collapse" data-target="#{{ company.id }}-info">Change Company Information</a>
      </td>
    </tr>
    <tr class="company-info-row">

      <td colspan="6" class="hiddenRow">
        <div class="accordion-body collapse" id="{{ company.id }}-info">
          <form action="" id="{{ company.id }}-edit-form" method="POST" class="update-company-form">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
            <div class="col-md-4">
              <div class="form-group">
                <label for="{{ company.id }}-company-name">Company Name</label>
                <input type="text" value="{{ company.company_name }}" id="{{ company.id }}-company-name" class="form-control" name="company-name">
                <label for="{{ company.id }}-company-website">Company Website</label>
                <input type="text" value="{{ company.website }}" id="{{ company.id }}-company-website" class="form-control" name="company-website">
              </div>
            </div>
            <div class="col-md-4">
              <div class="form-group">
                <label for="{{ company.id }}-email-address">Company Email</label>
                <input type="text" value="{{ company.email_address }}" id="{{ company.id }}-email-address" class="form-control" name="company-email">
              </div>
              <div class="form-group">
                <input type="submit" form="{{ company.id }}-edit-form" class="btn btn-default" value="Update">
              </div>
            </div>
            <div class="col-md-4 ajax-message">
              <div>
                <i class="fa fa-clock-o fa-2x"></i>
                <p style="display: inline-block;">Date scraped on: {{ company.scraped_on }}</p>
              </div>
            </div>
          </form>
        </div>
      </td>
    </tr>
  {% endfor %}

3 个答案:

答案 0 :(得分:3)

首先jQuery.getJSON()使用 JSON 对象发出GET请求,并将其作为查询参数传递。

这里的问题是jQuery.getJSON()以非传统方式序列化列表。因此,如果您查看浏览器发送的请求,它将类似于:

http://example.com/?contact[]=me&contact[]=others&contact[]=hr&remove[]=you&remove[]=doug

现在,Flask会将该查询字符串解析为一个具有键contact[]remove[]的args字典,但由于你正在执行`request.args.get('contact'),你什么也得不到

解决方案是在传递给jQuery.getJSON()之前自己创建查询参数。这可以使用jQuery.param()

完成
//Assign arrays for emailing and removing companies
var contact = ["me", "others", "hr"];
var remove = ["you", "doug"];

//Pass the data along to Python
$.getJSON(
    '/send_emails',
    $.param({ contact: contact, remove: remove }, true)
);

注意传递给true的{​​{1}},它返回传统格式的查询字符串,如下所示:

jQuery.param()

现在,您可以使用

在Flask中检索参数
contact=me&contact=others&contact=hr&remove=you&remove=doug

答案 1 :(得分:1)

你需要从请求中获取json,

content = request.json

然后使用你最喜欢的json解析器将json解析为一个对象。

obj = json.loads(content)

要回答你的问题,&#34;在javascript中将每一行单独发送到python或者在一个数组中同时发送所有内容会更高效吗?&#34;它会更高效一次发送所有数据并返回一个返回。

答案 2 :(得分:0)

有一个拼写错误:contacts = request.args.getList('contact')。我想你会写contacts = request.args.getlist('contact')