将数据从表单插入 MySQL 数据库、javascript 和烧瓶

Question

我正在为附近的事件创建一个网络应用程序，其中一个重要功能是创建事件的选项。截至目前，我有一个包含表单的模式。我无法使用 javascript 和 python flask web 应用程序在提交时输入表单并将其添加到数据库中。

这是我的html：

    <!-- Modal -->
<div id="eventInput" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Create an Event</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"></h4>
      </div>
    <form>
      <div class="modal-body">
            <div class="form-group">
                <input autocomplete="off" autofocus class="form-control" name="title" placeholder="Event Name" type="text"/>
            </div>
            <div class="form-group">
                <input autocomplete="off" autofocus class="form-control" name="description" placeholder="Description" type="text"/>
            </div>
            <div class="form-group">
                Start date and time:
                <input autocomplete="off" autofocus class="form-control" name="start" placeholder="Start date and time" type="datetime-local"/>
            </div>
            <div class="form-group">
                End date and time:
                <input autocomplete="off" autofocus class="form-control" name="end" placeholder="End date and time" type="datetime-local"/>
            </div>
            <div class="form-group">
                <input autocomplete="off" autofocus class="form-control" name="place" placeholder="Location Name" type="text"/>
            </div>

            Please use <a href="https://www.google.com/maps">Google Maps</a> to determine the accurate latitude and longitude of your event location
            <div class="form-group">
                <input autocomplete="off" autofocus class="form-control" name="lat" placeholder="Location Latitude" type="number"/>
            </div>
            <div class="form-group">
                <input autocomplete="off" autofocus class="form-control" name="long" placeholder="Location Longitude" type="text"/>
            </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Create Event</button>
      </div>

    </form>
    </div>

  </div>
</div>

Javascript：

   $(function() {
    $('submit').click(function() {
        var event = {
        'title': document.getElementById('title').value,
        'description': document.getElementById('description').value,
        'start': document.getElementById('start').value,
        'end': document.getElementById('end').value,
        'place': document.getElementById('place').value
       };
        $.ajax({
            url: '/createEvent',
            data: $('form').serialize(),
            type: 'POST',
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

还有蟒蛇：

# Add Event to database
@app.route('/createEvent', methods=['POST'])
def createvent() :
    title =  request.form['title'];
    description = request.form['description'];
    place = request.form['place'];
    start = request.form['start'];
    end = request.form['end'];
    db.execute("INSERT INTO events (user_id, title, description, place, start, end) VALUES (:user, :title, :description, :place, :start, :end)",
                user=session["user_id"], title=title, description=description, place=place, start=start, end=end)
    return render_template("list.html")

Answer 1

您需要在表单中添加一个 Id，然后删除 onsubmit 事件并仅在 jquery 中使用它。 你所有的表单元素都没有 id 属性，像这样添加它们：

html：

<div id="eventInput" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Create an Event</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"></h4>
      </div>
    <form  id="target" action="/destination">
      <div class="modal-body">
            <div class="form-group">
                <input autocomplete="off" autofocus class="form-control" name="title"   id= "title" placeholder="Event Name" type="text"/>
            </div>
            <div class="form-group">
                <input autocomplete="off" autofocus class="form-control" name="description"  id ="description" placeholder="Description" type="text"/>
            </div>
            <div class="form-group">
                Start date and time:
                <input autocomplete="off" autofocus class="form-control" name="start" id="start" placeholder="Start date and time" type="datetime-local"/>
            </div>
            <div class="form-group">
                End date and time:
                <input autocomplete="off" autofocus class="form-control" name="end" id ="end" placeholder="End date and time" type="datetime-local"/>
            </div>
            <div class="form-group">
                <input autocomplete="off" autofocus class="form-control" name="place" id ="place" placeholder="Location Name" type="text"/>
            </div>

            Please use <a href="https://www.google.com/maps">Google Maps</a> to determine the accurate latitude and longitude of your event location
            <div class="form-group">
                <input autocomplete="off" autofocus class="form-control" name="lat" id="lat" placeholder="Location Latitude" type="number"/>
            </div>
            <div class="form-group">
                <input autocomplete="off" autofocus class="form-control" name="long" id="long" placeholder="Location Longitude" type="text"/>
            </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Create Event</button>
      </div>

    </form>
    </div>

你的 javascript 是这样的：

$( "#target" ).submit(function( event ) {
  event.preventDefault();
  var new_event = {
        'title': document.getElementById('title').value,
        'description': document.getElementById('description').value,
        'start': document.getElementById('start').value,
        'end': document.getElementById('end').value,
        'place': document.getElementById('place').value
       };
       console.log(new_event);


$.ajax({
        url: '/createEvent',
        data: $('form').serialize(),
        type: 'POST',
        success: function(response) {
            console.log(response);
        },
        error: function(error) {
            console.log(error);
        }
    });

});