Django-Ajax POST JS变量可在不刷新页面的情况下初始化表单

时间:2019-02-13 21:41:00

标签: javascript ajax django post django-forms

到目前为止,我已经获得了一些出色的帮助,但是想更清楚,更具体地发布此问题。

我的情况:

在django工作时,我在模式窗口中有django表单。在调用api收集一些地质数据后,将打开模式窗口。我希望用地质数据填充此表单,而无需刷新页面。我正在使用ajax创建一个帖子,将我的数据对象转移到views.py(我可以在POST时将数据从views.py打印到终端中),但是表单没有使用数据初始化。取而代之的是,即使在api调用以收集数据并通过ajax发布之后,它也会使用“ PRE_POST”值进行初始化。

任何对这里可能发生的事情或如何解决的想法都将不胜感激!

matMap.html(代码段)

<!-- mineralForm Modal -->
            <div class="modal fade draggable" id="mineralFormModal" role="dialog" style="height: 100%;">
                    <!-- Modal content-->
                    <div class="modal-header">
                        <button id ="mineralFormModalClose" type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title" align="center" style="font-family: Lobster">Add New Mineral</h4>
                    </div>

                    <div class="mineralFormModal_body" id="mineralFormModal_body" style="position:absolute; top:0"> 
                    <h3>loading before modal clears</h3>
                    </div>
                    <br>

                    {{ form }}


                    <br>
                    <button id="modalSave" type="button" class="btn btn-default" data-dismiss="modal">Save</button>
                    <div class="modal-footer red lighten-3">
                        <button id="modalClose" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div> 

            </div>

(...)

$.ajax({
                    method: "POST",
                    url: '',
                    data: {

                        geology: geology,
                        latitude: x,
                        longitude: y,
                        csrfmiddlewaretoken: '{{ csrf_token }}',   
                    },
                    success: function(data){
                        console.log("AJAX POST SUCCESS!"); //grabs this entire page and all variables. 
                    },
                    error: function(error_data){
                        console.log("error");
                        console.log(error_data);
                    }


                });

views.py

def home_view(request):
    geology = request.POST.get('geology')
    latitude = request.POST.get('latitude')
    longitude = request.POST.get('longitude')

    if request.method == "POST":
        print("!!!! POSTING from HOME !!!!" + geology + " " + latitude + " " + longitude)
       form = MineralForm(request.POST, initial={'geology': "POST_VALUE",'latitude': "POST_VALUE", 'longitude': "POST_VALUE"})
        print("NOW WE ARE POSTING: ")
        print(form)
        return render(request, 'blog/matMap.html', {'form': form}) 

    else:
        print("LOADING HOME: INITIAL STATE (BEFORE POST)")
        form = MineralForm(initial={'geology': "PRE_POST",'latitude': 'PRE_POST', 'longitude': 'PRE_POST'}) # populates form with what user tried to submit...
        return render(request, 'blog/matMap.html', {'form': form})

这是我的终端输出,从初始页面加载到ajax发布后:

LOADING HOME: INITIAL STATE (BEFORE POST)
[13/Feb/2019 13:36:07] "GET / HTTP/1.1" 200 41261
Not Found: /js/scripts.js
[13/Feb/2019 13:36:07] "GET /js/scripts.js HTTP/1.1" 404 3210
Not Found: /js/scripts.js
[13/Feb/2019 13:36:08] "GET /js/scripts.js HTTP/1.1" 404 3210
[13/Feb/2019 13:36:08] "GET /api/chart/data/ HTTP/1.1" 200 4039
!!!! POSTING from HOME !!!!Miocene -119.48709 44.85346
NOW WE ARE POSTING: 
<tr><th><label for="id_mineral">Mineral:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><input type="text" name="mineral" required id="id_mineral"></td></tr>
<tr><th><label for="id_description">Description:</label></th><td><ul class="errorlist"><li>This field is required.</li></ul><textarea name="description" cols="40" rows="10" required id="id_description">
</textarea></td></tr>
<tr><th><label for="id_geology">Geology:</label></th><td><input type="text" name="geology" value="Miocene" required id="id_geology"></td></tr>
<tr><th><label for="id_latitude">Latitude:</label></th><td><input type="text" name="latitude" value="-119.48709" required id="id_latitude"></td></tr>
<tr><th><label for="id_longitude">Longitude:</label></th><td><input type="text" name="longitude" value="44.85346" required id="id_longitude"></td></tr>
[13/Feb/2019 13:36:30] "POST / HTTP/1.1" 200 41593

但是,即使在此之后,当我调出模态形式时,它也看起来像这样:

photo of my django form in modal AFTER ajax post

谢谢!

0 个答案:

没有答案