Question

我之前发过一个问题，回复与一个没有帮助的问题相关联，问题已经发生了变化，所以这是一个新问题这是我用来将查询结果发布到我的数据库的HTML文件的全部内容。查询正常工作，它返回json信息，但它不应该确定如何从响应中获取json并填充表而不重新加载页面。目前发生的事情是我填写表来查询数据库，然后将结果序列化为json，然后页面显示json信息。（这都是我的烧瓶路由声明处理的。）我想要完成的是没有重新加载相反，它只是在表中填充结果在适当的字段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reports</title>
</head>
<body>
{% extends "layout.html" %}
{% block content %}
  <div class="index">
    <h1>Report Generation</h1>
      <p>Search for accounts to generate a report for.</p>
<div class="jumbotron">
        <form class="form-signin" method="post" id="query">
        <label for="searchFirst" class="sr-only">First Name</label>
            <input type="name" value="{{request.form.searchFirst}}" name="searchFirst" id="searchFirst" class="form-control" placeholder="First Name" required autofocus>
        <label for="searchLast" class="sr-only">Last Name</label>
            <input type="name" value="{{request.form.searchLast}}" name="searchLast" id="searchLast" class="form-control" placeholder="Last Name">
        <label for="searchPhone" class="sr-only">Phone Number</label>
            <input type="name" value="{{request.form.searchPhone}}" name="searchPhone" id="searchPhone" class="form-control" placeholder="Phone Number">
               <button id="btnSignUp" class="btn btn-lg btn-primary btn-block" type="submit">Search</button>
        </form>
      </div>
    <br>
      <div id="results">
                <table class="blueTable" id="queries">
<thead>
<tr>
    <th>Policy(ies) ID</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Street</th>
    <th>City</th>
    <th>State</th>
    <th>Zip Code</th>
    <th>Phone Number</th>
</tr>
</thead>
<tbody>
<tr data-bind="foreach: viewModel.queries">
    <td data-bind="text: id"></td>
    <td data-bind="text: first"></td>
    <td data-bind="text: last"></td>
    <td data-bind="text: street"></td>
    <td data-bind="text: city"></td>
    <td data-bind="text: state"></td>
    <td data-bind="text: zipcode"></td>
    <td data-bind="text: phonenumber"></td>
</tr>
</tbody>
</table>
      </div>

  </div>
<script type="text/javascript">
$(function () {
     ko.applyBindings(viewModel);
     viewModel.loadQueries()
});

    function result(result){
        this.id = ko.observable(result.id);
        this.first = ko.observable(result.first);
        this.last = ko.observable(result.last);
        this.street = ko.observable(result.street);
        this.city = ko.observable(result.city);
        this.state = ko.observable(result.state);
        this.zipcode = ko.observable(result.zipcode);
        this.phonenumber = ko.observable(result.phonenumber);
    }

    var viewModel = {
    queries: ko.observableArray([]),
    loadQueries: function () {
        var self = this;
        $.getJSON("/process",function (queries) {
                self.queries.removeAll();
                self.queries(queries)
            }
        );
    }
};

    $('#query').submit(function (e) {
       $.postJSON('/reports', query, result());
        e.preventDefault();
    });

    jQuery.extend({
      postJSON: function(url, data, callback) {
        return jQuery.ajax({
          type: "POST",
          url: '/reports',
          data: typeof data == 'string'?data:JSON.stringify(data),
          success: callback,
          dataType: url,
          contentType: "application/json",
          processData: false
        });
      }
    });
</script>
{% endblock %}
</body>
</html>

这就是我的json返回的方式

{
  "contacts": [
    {
      "city": "your city", 
      "first": "No", 
      "id": 6, 
      "last": "Policy", 
      "phonenumber": "0000000000", 
      "state": "your state", 
      "street": "123 Main St", 
      "zipcode": "00000"
    }
  ]
}

Answer 1

在你的javascript块中，你需要定义你的回调函数需要什么。你使用它作为post函数的参数，但我的猜测是它目前是未定义的。这是在ajax通信中成功调用的函数。

E.g。

function callback(data) {
    // do something here
}

$('#query').submit(function (e) {
   $.postJSON('/reports', query, result());
    e.preventDefault();
});

jQuery.extend({
  postJSON: function(url, data, callback) {
    return jQuery.ajax({
      type: "POST",
      url: '/reports',
      data: typeof data == 'string'?data:JSON.stringify(data),
      success: callback,
      dataType: url,
      contentType: "application/json",
      processData: false
    });
  }

用sqlalchemy查询淘汰填充表

1 个答案: