主页 / 问题 / 1074597
Accepted
Violet
Asked:2020-01-26 20:12:03 +0000 UTC2020-01-26 20:12:03 +0000 UTC

如何通过ajax在同一页面上提交来自两个不同表单的数据？

  • 772

该页面有一个搜索表单，通过 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'

如何通过 ajax 从不同形式的 python 中获取数据？

python

1 个回答

  1. Best Answer
            $(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(); 
});
  });

    使用 jQuery 和 JavaScript 提交表单的 Ajax 请求的正确示例

    改变了这样的形式：

    <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>
    • 1

相关问题