Javascript 如何将FlaskDB query所有结果传递给模板，以便jquery也可以访问它？

我正在试图弄清楚如何访问FlaskDB query从jquery函数传递到模板的所有数据。我有一个包含客户姓名和客户电话号码的db表。我通过flask view db query all将其传递给模板。我迭代这个，并将customer_name加载到下拉列表中，这里没有问题！我使用jquery监视下拉选择，并希望在选择customer\u name时将customer\u phone\u number加载到文本输入字段中。大概是这样的：

烧瓶视图：

@auth.route('/order/add', methods=['GET', 'POST'])
@login_required
def order_add():
    form = OrderForm()
    custs = Customer.query.filter_by(type_is_retail=False).all()
    return render_template('auth/orders/order_add_test2.html', 
    custs=custs,  form=form, title='New Order')

html模板：

<div class="form-group form-group-comp_name col-xs-12" id="wholesale_set"
       style="display: none;"> <!-- SET display to none -->
      <label class="control-label">Company Name</label>
      <select class="form-control " id="comp_name" name="cust" type="text">
        <option>Add New Company</option>
        <option disabled>----------------------------</option>
        <option hidden disabled selected value>Select Company</option>
      {% if custs %}        
        {% for cust in custs %}
        <option>{{ cust.lname }}</option>
        {% endfor %}
      {% endif %}
      </select>
    </div>

<div class="form-group form-group-pn_set col-xs-12" id="pn_set"
     style="display: none;"> <!-- SET display to none -->
      <label class="control-label" for="pn">Phone Number</label>
      <input class="form-control" id="pn" name="pn" maxlength="12"
             style="text-align: center;" type="text"/>
</div>

这一行阻止我的其他（与此问题无关）jquery函数工作

但如果我：

var custs; 
$('#comp_name').on('change', function() { 
custs = "{{ custs }}"; 
alert(custs); 
}); 

然后警报显示：

[<Customer1>,<Customer3>] 

哪一个是我需要访问的正确客户号码，但没有显示我可以访问或参考的_name或_phone_号码。 然而，这似乎让我更接近我的目标！ 我怎样才能正确地使用它来访问custs.company_name和custs.phone_number？

---

我并不反对使用AJAX，如果这是唯一的方法，我只是不认为这是最有效的方法，因为我需要的数据已经被传递到模板。我是否也应该以不同的方式传递相同的数据，以便jquery在将其传递给模板的同时访问它？而不是将数据传递给模板，然后启动jquery返回flask视图以获取相同的数据（可能包裹在不同的外套中！），并将其带回jquery

因为您不想使用AJAX请求，所以AFAIK实现这一点的唯一方法是将JSON中的数据转储到javascript中

<script>
var custs = {{ custs }};
// other part of code
// here you can perform what ever you want
</script>

编辑： 如果

“

，

”

和其他字符串被转义，则使用下面的

safe

过滤器将字符串标记为安全

---

var custs={{cust_json | safe}}

好吧，我想出了一个解决方案！也许不是最好的方法，但它对我很有效

我将html更改为：

<div class="form-group form-group-comp_name col-xs-12" id="wholesale_set"
   style="display: none;"> <!-- SET display to none -->
  <label class="control-label">Company Name</label>
  <select class="form-control " id="comp_name" name="cust" type="text">
    <option>Add New Company</option>
    <option disabled>----------------------------</option>
    <option hidden disabled selected value>Select Company</option>
  {% if custs %}        
    {% for cust in custs %}
    <option>{{ cust.lname }}</option>
    {% endfor %}
  {% endif %}
  </select>
</div>

<div class="form-group form-group-pn_set col-xs-12" id="pn_set"
 style="display: none;"> <!-- SET display to none -->
  <label class="control-label" for="pn">Phone Number</label>
  <input class="form-control" id="pn" name="pn" maxlength="12"
         style="text-align: center;" type="text"/>

致：

---

工作正常！

将var custs={{{custs}}；添加到我的脚本中会停止所有其他jquery的运行！问题是由于将过滤器转义到相应的HTML代码中。

<script>
var custs = {{ custs }};
// other part of code
// here you can perform what ever you want
</script>

[{
        "customer_name": "Test Name",
        "customer_phone_number": "+140123445"
    },
    {
        "customer_name": "Test Name2",
        "customer_phone_number": "+1401234456"
    }
]

<div class="form-group form-group-comp_name col-xs-12" id="wholesale_set"
   style="display: none;"> <!-- SET display to none -->
  <label class="control-label">Company Name</label>
  <select class="form-control " id="comp_name" name="cust" type="text">
    <option>Add New Company</option>
    <option disabled>----------------------------</option>
    <option hidden disabled selected value>Select Company</option>
  {% if custs %}        
    {% for cust in custs %}
    <option>{{ cust.lname }}</option>
    {% endfor %}
  {% endif %}
  </select>
</div>

<div class="form-group form-group-pn_set col-xs-12" id="pn_set"
 style="display: none;"> <!-- SET display to none -->
  <label class="control-label" for="pn">Phone Number</label>
  <input class="form-control" id="pn" name="pn" maxlength="12"
         style="text-align: center;" type="text"/>

<div class="form-group form-group-comp_name col-xs-12" id="wholesale_set"
   style="display: none;"> <!-- SET display to none -->
  <label class="control-label">Company Name</label>
  <select class="form-control " id="comp_name" name="cust" type="text">
    <option>Add New Company</option>
    <option disabled>----------------------------</option>
    <option hidden disabled selected value>Select Company</option>
  {% if custs %}        
    {% for cust in custs %}
    <option value="{{ cust.pn }}>{{ cust.lname }}</option> <-------HERE-----
    {% endfor %}
  {% endif %}
  </select>
</div>

<div class="form-group form-group-pn_set col-xs-12" id="pn_set"
 style="display: none;"> <!-- SET display to none -->
  <label class="control-label" for="pn">Phone Number</label>
  <input class="form-control" id="pn" name="pn" maxlength="12"
         style="text-align: center;" type="text"/>

$('#comp_name').on('change', function() {
    var cust_pn;
    for cust in custs {
        if ($(this).val() == cust.customer_name) {
        $('#pn').val() = cust.customer_phone_number;
        }
    }
});

$('#comp_name').on('change', function() {
    $('#pn').val($(this).val());
});