1

На странице имеется форма поиска, обработка через ajax:

<body>
<script>
    function get_data() {
        $.ajax({
            url: "/get_data",
            data: $('form').serialize(),
            type: 'POST',
            success: function(response) {
                var json = jQuery.parseJSON(response)
                $('#data').html(json.data)
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    }
</script>
<form onsubmit="get_data();return false" action="" method="post" id="form" name="form">
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1">{{count}}</span>
                </div>
                <input type="text" class="form-control" id="name" name="name" aria-describedby="button-addon2"
                required
                oninvalid="this.setCustomValidity('Заполните это поле')" oninput="setCustomValidity('')">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="submit" name="finduser" value="Validate" onclick="get_data();">
                        Поиск
                    </button>
                </div>
            </div>
        </form>
<div id="data"></div>

Она прекрасно работает, передаёт данные в мой python и возвращает данные обратно на страницу:

        @app.route('/get_data', methods=['POST'])
        def get_data():
        if request.form['name'] == '':
           lst = search_user(request.form['name'].lower())
           return json.dumps({'data': render_template('response.html', 
           lst=lst, len=range(0, len(lst)))})

Мне понадобилось добавить еще одну форму, я создал

@app.route('/add_data', methods=['POST'])
def add_data():
  print(request.form['l_name'])

добавил на страницу новую форму, а так же скопировал функцию:

<script>
    function add_data() {
        $.ajax({
            url: "/add_data",
            data: $('adduser').serialize(),
            type: 'POST',
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    }
</script>

    <form onsubmit="add_data();return false" action="" method="post" id="adduser" name="adduser">
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <input type="text" class="form-control" id="l_name" name="l_name" placeholder="Фамилия" required oninvalid="this.setCustomValidity('Заполните это поле')" oninput="setCustomValidity('')">
  </div>
  </div>
  </form>
  <button class="btn btn-success" type="submit" name="adduser" value="Validate" onclick="add_data();">Добавить</button>

Но это не сработало. Я получаю ошибку в консоли PyCharm:

print(request.form['l_name'])
raise exceptions.BadRequestKeyError(key)
KeyError: 'l_name'

Как мне получать данные в python с разных форм через ajax?

1 ответ 1

1
        $(function() {
      $('form').submit(function(e) {
        var $form = $(this);
        $.ajax({
          type: $form.attr('method'),
          url: $form.attr('action'),
          data: $form.serialize()
      }).done(function(response) {
        var json = jQuery.parseJSON(response)
        $('#data').html(json.data)
        console.log('success');
    }).fail(function() {
      console.log('fail');
  });
    //отмена действия по умолчанию для кнопки submit
    e.preventDefault(); 
});
  });

Правильный пример Ajax запроса для отправки формы c помощью jQuery и JavaScript

Изменил формы таким образом:

<form action="/get_data" method="post" id="finduser" name="form">
<form action="/add_data" method="post" id="adduser" name="form">

<button type="submit" name="finduser" value="Validate">Поиск</button>
<button type="submit" name="adduser" value="Validate">Добавить</button>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.