在表单上的post方法中发送文件提交并使用json响应填充数据表

时间:2017-03-02 10:45:10

标签: jquery django datatables

我有一个以这种方式定义的数据表,我无法改变。

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

点击按钮我想发帖请求并将文件传递给后端。搜索后我发现我可以使用

更改表格设置

var oSettings = table.fnSettings();

所以我的点击按钮操作类似于:

$('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();

所以我无法做的是如何将这个formdata传递给我的后端。我能够在支持但不是文件中获取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>

如果您需要任何额外信息,请发表评论。任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:0)

好的,我确实理解这是一个非常长且非具体的问题,但我会尽力回答。这个问题和答案是django特有的。

有问题的django表单需要对添加动作字段进行一个小修改,这基本上意味着在提交此表单时您想要点击哪个网址。 所以新表单看起来像这样:

         <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <Button
                android:id="@+id/main_fashion_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/thumbnail_channel_fashion"
                android:text="Fashion"
                android:textColor="#FFFFFF"
                android:gravity="bottom"
                android:layout_weight="1"/>


            <Button
                android:id="@+id/main_science_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/thumbnail_channel_science"
                android:text="Science"
                android:textColor="#FFFFFF"
                android:gravity="bottom"
                android:layout_weight="1"/>


        </LinearLayout>

要在服务器端捕获此URL,您应该在urls.py文件中包含一行,当该URL被命中时,该行将调用views函数。

<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(r'^your_url/$', 'process_file',name='process_file') 与浏览器中的当前路径无关,因为它不是以{your_url}开头的。所以根据你的表格有你的网址。有关django urls here的更多信息。

现在,您应该在views.py文件中定义一个名为process_file {根据当前网址}的函数。 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")

然后根据您的要求处理文件。

现在,您可以在模板内的前端访问从后端发送的数据。所以我不得不创建另一个html文件,其中有一个数据表,没有将服务器端处理设置为true。我们使用此行form = FileUploader(request.POST, request.FILES) if form.is_valid(): filename=request.FILES['file'].name向数据表提供数据。          $(document).ready(function(){

"aaData":dataset.aaData

如果你在这一点上阅读这个答案,关键是我们现在在模板中有我们的数据。我们在模板中添加了一些js代码,以便将这些数据提供给我们的数据表。这样我就可以将文件传递给后端,处理该文件,然后在我的前端显示响应。