Ajaxを使用してテーブルからFlaskビューにデータをどのように投稿しますか？

-1

私は、選択されたオブジェクトのcase_idをFlaskビューに渡すためにクリック可能な反復されたtrs/caseオブジェクトのそれぞれを以下に示すようにしようとしています。 JSがIDの取得に関して働いているようですが、Ajaxでないかどうかはわかりません。Ajaxを使用してテーブルからFlaskビューにデータをどのように投稿しますか？

<table class="table table-striped"> 
    {% for case in cases %} 
     <tr method="POST" action="/current_case/"> 
      <td>{{ case.case_id }}</td> 
      <td>{{ case.case_name}}</td> 
      <td>{{ case.case_desc }}</td> 
      <td>{{ case.case_date }}</td> 
     <tr> 
    {% endfor %} 

</table>

フラスコビュー：

@app.route('/current_case/', methods=['GET', 'POST']) 
def current_case(): 
    case = Case 
    if request.method == 'POST': 
     case_id = request.form['case_id'] 
     current_case = Case.query.filter_by(case_id=case_id).first_or_404() 
     return render_template('welcome.html', 
           case=current_case) 
    else: 
     pass

はJavaScript：

<script type="text/javascript"> 
$(document).ready(function() { 
$("#table tr").click(function(){ 
    $(this).addClass('selected').siblings().removeClass('selected'); 
    var value=$(this).find('td:first').html(); 
}); 
    $('#table tr').on("dblclick", function(e){ 
     var case_id = $("#table tr.selected td:first").html(); 
     var data = $(this).find("td:first").text(); 
     alert(case_id); 
    }); 
    $.ajax({ 
     url: "{{ url_for('current_case') }}", 
     data: {'case_id' : case_id}, 
     type: 'POST', 
     success: function(response) { 
      console.log(response); 
     }, 
     error: function(error) { 
      console.log(error); 
     } 
    }); 
}); 
</script>

任意のアイデア、思考は、右方向へのポインタがすべて評価されて:)

多くのおかげ

出典

2016-04-19 Sm1ley

次のプログラムはテーブルを提示します。ユーザーがテーブルエントリをダブルクリックすると、ページはFlaskへのAJAXリクエストをPOSTし、結果を受け取り、その結果を現在のページに表示します。簡単にするために、データベース接続の代わりにPython listを使用しました。 Pythonの2.7.6、フラスコ0.10.1は、Ubuntu 14.04.4

from flask import Flask, render_template_string, request, jsonify, abort 
import wikipedia 
from collections import namedtuple 

app = Flask(__name__) 

index_html=''' 
<!DOCTYPE html> 
<html lang="en"> 
<head><title>Wiki Lookup Example</title></head> 
<body> 
<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" 
    type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.table tr').on("dblclick", function(e){ 
     var case_id = $(this).find("td:first").text(); 
     $.ajax({ 
      url: "{{ url_for('current_case') }}", 
      data: {'case_id' : case_id}, 
      type: 'POST', 
      success: function(response) { 
       $("#result").html(response); 
      }, 
      error: function(error) { 
       console.log(error); 
      } 
     }); 
    }); 
}); 
</script> 

<table border="1" class="table table-striped"> 
    {% for case in cases %} 
     <tr method="POST" action="/current_case/"> 
      <td>{{ case.case_id }}</td> 
      <td>{{ case.case_name}}</td> 
      <td>{{ case.case_desc }}</td> 
      <td>{{ case.case_date }}</td> 
     <tr> 
    {% endfor %} 

</table> 

<hr /> 
<div id="result"></div> 
</body></html>''' 

# Just an HTML snippet, not a whole document. 
welcome_html = ''' 
<p>Id: {{case.case_id}}</p> 
<p>Desc: {{ case.case_desc }}</p> 
''' 

CaseType = namedtuple('CaseType', 'case_id case_name case_desc case_date') 
case_db = [ 
    CaseType('0', 'Abc', 'Able Baker Charlie', 'Delta'), 
    CaseType('1', 'Def', 'Delta Echo Foxtrot', 'Golf'), 
] 

@app.route('/') 
def index(): 
    return render_template_string(index_html, cases=case_db) 

@app.route('/current_case/', methods=['GET', 'POST']) 
def current_case(): 
    if request.method == 'POST': 
     case_id = request.form['case_id'] 
     #current_case = Case.query.filter_by(case_id=case_id).first_or_404() 
     for current_case in case_db: 
      if current_case.case_id == case_id: 
       break 
     else: 
      abort(404) 
     return render_template_string(welcome_html, 
           case=current_case) 
    else: 
     pass 

app.run(debug=True)

出典

2016-04-19 02:32:03

おかげでテスト

！私は上記の実装されたテクニックを使用して、current_caseメソッドに渡されたcase_idと設定されているcurrent_caseを見ています。しかし、リクエストをシャットダウンしているレンダリングテンプレートに何か問題があるようです： – Sm1ley

Ajaxを使用してテーブルからFlaskビューにデータをどのように投稿しますか？

答えて

関連する問題