Question

我知道这可能看起来像是一个重复的问题。

我差不多3天试图找到这种情况的解决方案。有些人已经说过我应该使用AJAX。我不太习惯前端编码，而且很难找到解决方案。我对AJAX一无所知，并且我想在ANGULARJS编码中找到解决方案，只要它是我一直在研究的。我真的觉得我想做的事情很简单，但是只要我是一个全新的人，我就会觉得它真是太难了。在这里。

我使用下面的代码＆＃34;尝试＆＃34;收集从HTML表单中选择的给定种族（raceId）的数据。

FLASK BACK END

<!-- language: python3 -->

app = Flask(__name__)

@app.route('/') #index
def showDriverList():
    return render_template('index.html')

@app.route('/getResult', methods=['POST']) #give the result of a selected raceid
def getResult():
    resultDetail = {
            'finalresult':'finalresult',
            'id':'id'}
    try:
        if request.method == 'POST':
            result = request.form.get('raceId')
            print('-=-='*25, result) #debug
            resdb = db.Races.find_one({'_id': ObjectId(result)})
            resultDetail = {
                'finalresult':resdb['finalresult'],
                'id':str(resdb['_id'])}
    except Exception as e:
        return str(e)
    print(json.dumps(resultDetail)) #debug
    return json.dumps(resultDetail)

HTML表单代码

<div ng-controller="MyCtrl">
 <div class="row">
   <form method="POST">
     <label>Select a Race</label>
       <select id='selectBy' class="form-control" name="raceId" ng-model="raceresult" ng-change="selRace()">

        <option ng-repeat="row in rows" value="{{row}}" name="raceId">
            {{row}}
        </option>

       </select>
      </form>
<hr>
  </div>

说我希望动态更改表格非常重要。

    <table>
      <thead class="thead-dark">
        <th>Name</th>
        <th>Position</th>
      </thead>

       <tbody ng-repeat="item in results">
         <tr>
           <th>{{item}}</th> 

           <td>{{item}}</td>

         </tr>
       </tbody>
     </table>



<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

我还在角度代码中放了一些示例数据，只要我们无法访问数据库。不过，我可以向您保证，当我使用

提交下面的表格时

<form action='/getResult'>

我发送到localhost：5000 / getResult，该页面显示了在浏览器窗口中选择作为非常长的JSON文本的ID的正确结果。

所以，我可以获取数据，但是我没有找到一种方法让AngularJS填充表格。

Angular代码是这样的：

var myApp = angular.module('myApp', []);

    function MyCtrl($scope) {
        $scope.rows = ['row1','row2','row3'];
    //Here goes some example data. Everything is supposed to be retrieved from flask back end
    //The $scope.results is an example of how the data comes from backend
            $scope.results = [{
        'id':'row1',
        'finalresult': [{'name': 'Ayrton Senna', 'position':1 },{'name': 'Nigel Mansell', 'position':2}]},
        {'id':'row2',
        'finalresult': [{'name': 'Ayrton Senna', 'position':1 },{'name': 'Michael Schumacher', 'position':2}]},
        {'id':'row3',
        'finalresult': [{'name': 'Ayrton Senna', 'position':1 },{'name': 'Michael Schumacher', 'position':2}, {'name': 'Nigel Mansell', 'position':3}]}];

    //The $scope.raceresult is how the data was supposed to be get by $scope.selRace().
    //I mean that I'd like this data to be retrieved and displayed in the HTML table by using ng-change
        $scope.raceresult = {'id':'row1',
        'finalresult': [{'name': 'Ayrton Senna', 'position':1 },{'name': 'Nigel Mansell', 'position':2}]}
    //end of example data

    // this is the POST request that front should do to retrieve data from backend.
    $scope.showresult = function(id){ 
          $http({
            method: 'POST',
            url: '/getResult',
            data : "raceid=" + id, // I'm totally UNSURE that is exactly what I wanted to do =/ 
          }).then(function(response) {
            $scope.result = response.data;
            console.log('POST', $scope.result)
          },
          function(error) {
            console.log(error);
          });
        }

    $scope.selRace = function() {
          $scope.id = $scope.e.value;
          console.log("TEST", $scope.id)
          $scope.showresult($scope.id)
          }
          }

我不确定我是否向您提供了所需的所有信息，以便为我提供新的见解。所以我创建了一个JSfiddle来试图让事情变得更加清晰。我真的不想要这个问题的最终答案。我只想知道如何做我想做的事。我想我可能会被困在一个非常简单的逻辑中，而这个逻辑并没有进入我的脑海。

从后端数据填充表[AngularJS + Flask]

0 个答案: