フォーム送信時にpostメソッドでファイルを送信し、jsonレスポンスを使用してデータテーブルを作成する

Question

私はこの方法で定義したデータテーブルを変更できません。

var table = $('#dt-table').dataTable({ 
    "sPaginationType": "bootstrap", 
    "processing": true, 
    "bServerSide": true, 
    'bPaginate' : true, 
    "bStateSave": true, 
    "sAjaxSource": 'myurl', 
    some other fields}) 

ボタンをクリックすると、投稿リクエストを作成してファイルをバックエンドに渡したいと思っています。だから、私は何をすることはできないのですが、私はどのように行う

$('form').on('submit', function(e){ 
    e.preventDefault(); 
    var data = new FormData($(this)[0]); 
    console.log(data); 
    var oSettings = table.fnSettings(); 
    oSettings.sAjaxSource="/home/file_upload/; 
    oSettings.sServerMethod="POST"; 
    //oSettings.aoData.push(data) 
    table.fnDraw(); 

です：検索した後私は私のクリックボタンのアクションのようなものをされて、私は

var oSettings = table.fnSettings();

を使用して、テーブルの設定を変更することができることが判明しましたこのフォームデータをバックエンドに渡します。私は、バックアップされたファイルではなくpostファイルでpostメソッドを取得することができます。 基本的なモットーは、このファイルを処理してサーバーから取得したjsonデータをデータテーブルに取り込むことです。また、このようなdjangoフォームを使用しています：

<form name="form" method="post" id="file-upload-form" enctype="multipart/form-data">{% csrf_token %} 
    {{ form.as_p }} 
    <input type="file" name="file"/> 
<button type="submit" class="btn btn-primary" id='upload-btn'>Upload</button> 
</form> 

追加情報が必要な場合は、コメントしてください。どんな助けもありがとうございます。

Answer 1

これは非常に長く非特異的な質問でしたが、私はそれに答えようとします。この質問と回答はdjangoに固有です。

上記のdjango形式では、このフォームが送信されたときにヒットしたいURLを基本的に意味するアクションフィールドを追加する必要があります。 だから新しいフォームは次のようになります。

<form name="form" method="post" id="file-upload-form" enctype="multipart/form-data" target="_blank" action="your_url">{% csrf_token %} 
    {{ form.as_p }} 
    <b>Select a csv file :<input type="file" id="file" name="file" /></b> 
    <!--<label for="file" class="btn btn-file">Select a csv file</label>--> 
<button type="submit" class="btn btn-primary" id='upload-btn'>Load</button> 
</form> 

は、サーバー側でこのURLを取得するには、次のURLがヒットしたときのビュー関数を呼び出しますあなたのurls.pyファイルの1行を含める必要があります。

url(r'^your_url/$', 'process_file',name='process_file') 

してくださいではない、それは/で始まるされていないとして、この{your_url}がブラウザに現在のパスに相対的であること。あなたのフォームごとにあなたのURLを持っています。 django URLの詳細についてはhereをご覧ください。

これで、現在のurlに応じてprocess_fileという名前の関数をviews.pyファイルに定義する必要があります。 Djangoがファイルを渡してくれます。

def process_file(request, template_name='response.html'): 
if(request.method=='POST'): 
    form = FileUploader(request.POST, request.FILES) 
    if form.is_valid(): 
     filename=request.FILES['file'].name 
     if filename.endswith('.csv'): 
      f = request.FILES['file'] 
      json_data= handle_uploaded_file(f,can_edit) 
      return render_to_response(template_name, locals(), RequestContext(request)) 
     else : 
      logging.error("File with other than csv extension") 
      return HttpResponse("Please choose a csv file only") 
    else : 
     logging.error("Not a valid form") 
     return HttpResponse("Please Choose a file then click the upload button") 
else : 
    logging.error("Method is not post") 
    return HttpResponse("Something Went wrong , Please try again") 

あなたは上記のコードに示すように、これらの行を使用してファイル、あなたのビューでファイルにアクセスすることができます。

form = FileUploader(request.POST, request.FILES) if form.is_valid(): filename=request.FILES['file'].name

次に、あなたの要件に応じてファイルを処理します。

これで、バックエンドから送信したデータは、フロントエンドのテンプレート内でアクセスできます。だから私はtrueに設定serverside処理を持たないdatatableを持っている別のhtmlファイルを作成する必要がありました。このラインを使用してデータテーブルにデータを供給しています"aaData":dataset.aaData。あなたがこの回答を読んで、この時点に来た場合（ドキュメント）.ready（関数（）{

var dataset=JSON.parse('{{json_data | escapejs }}'); 
    var table = $('#dt-table').dataTable({ 
    "sPaginationType": "full_numbers", 
    "processing": true, 
    "aaData":dataset.aaData, 
    "bPaginate" : true, 
    some other fields}) 

$は、最も重要な点は、私たちが今、私たちのテンプレートで私たちのデータを持っています。このデータをデータテーブルに提供するために、テンプレートにいくつかのjsコードを追加します。この方法で私はバックエンドにファイルを渡し、そのファイルを処理してフロントエンドに応答を表示することができました。