如果可以提交表格 Ajax 和 Flask？

Question

我有一个使用 Flask 和 JavaScript 的应用程序。 当用户单击按钮并将数据发送到 Flask 时，我在 JavaScript 中有一个 function。 此 function 在 map 上创建一个标记，并将 Z9784E91C7B265678917 中 function 中的数据设置为 markerup.678917 我在弹出窗口中使用form ，因为我想从这个弹出窗口中获取名称。 我想从弹出窗口提交此表单并获取名称，但是当我这样做时print("Name:",nazwa_event)它返回我无。 我在 html 中创建了一个带有隐藏标签的输入，并将输入值设置为表单中的名称$('input[id=nameOF]').val(nazwa.value); . 可以这样做还是我不能从Ajax提交表格？

HTML 代码：

<input type="text" id="name_of_event"  class="form-control mb-2" name="name_event" placeholder="Nazwa wydarzenia">
                    <input name="nameOfEvent" type="hidden" value="" id="nameOF">
                    <br>
                    <button id="search-button_event" type='submit' name="event_form" class="btn btn-primary">Szukaj</button>

JS代码：

$("#search-button_event").click(function () { // make ajax request on btn click
        $.ajax({
            type: "POST",
            url: "/mapaa", // url to the function
            data: {
                nameevent: $("#name_of_event").val(), // value of the form
            },
            success: function (response) {
                 
                 nazwa = (response['name']);
                 
                let marker_event = L.marker(array[0]).bindPopup()
                marker_event._popup.setContent(
                                                                '<form method="POST" action="/mapaa"'+
                                                                '<p>Nazwa: '+nazwa+'</p>'+
                                                                '<button type="submit" id="form-submit" name="form-submit"  class="btn btn-warning btn-block">Dołącz do wydarzenia</button>'+
                                                                '</form>')

                marker_event.addTo(mymap)

                polyline_event = L.polyline(array,{color: 'red'})
                marker_event.on('click',function(){
                    polyline_event.addTo(mymap)
                })
                marker_event.getPopup().on('remove', function() {
                    polyline_event.remove()
                })


                $('input[id=nameOF]').val(nazwa.value);
                mymap.setView(array[0],14)
            },
        });
    });

FLASK 代码：

@app.route('/mapaa',methods=['GET','POST'])
def mapa():
    user_id = current_user.get_id()
    slownik = {}

    if request.method == "POST":

        if request.is_json:
            req = request.get_json()
            nazwa = req['name']
            data_pocz = req['data_start']
            data_kon = req['data_end']
            typ = req['type']
            dlugosc = req['len_route']
            coord = req['coordinates']
            event_database = Event(date_start=data_pocz, date_end=data_kon, type=typ, name=nazwa, len_route=dlugosc,admin=user_id, route=coord)
            db.session.add(event_database)
            db.session.commit()
            print('Dodano wydarzenie')




        if 'form-submit' in request.form:
            nazwa_event = request.form.get('nameOfEvent')
            print("Id ev:",nazwa_event)
            


        else:
            name_ev = request.form.get('nameevent')
            all_data = Event.query.filter_by(name=name_ev).all()
            for row in all_data:
                date_st_string = str(row.date_start)
                date_end_string = str(row.date_end)
                slownik = {'id':row.id,'date_st':date_st_string,'date_end':date_end_string,'type':row.type,'name':row.name,'len_route':row.len_route,'route':row.route}
            return jsonify(slownik)
    return render_template('mapaa.html', title='Mapa')

Answer 1

我无法测试它，但对我而言，您将<input>隐藏在错误的位置 - 它必须在popup内的form内。 您可以直接在 HTML 中设置值，而无需使用jQuery

marker_event._popup.setContent(
    '<form method="POST" action="/mapaa"' +
    
    '<input name="nameOfEvent" type="hidden" value="' + nazwa.value + '" id="nameOF">' + 
                
    '<p>Nazwa: ' + nazwa + '</p>' +
    '<button type="submit" id="form-submit" name="form-submit"  class="btn btn-warning btn-block">Dołącz do wydarzenia</button>' +
    '</form>'
)

我不确定它应该是nazwa.value还是只有nazwa像'<p>Nazwa: ' + nazwa + '</p>'