Flask - Получение NoneType при использовании request.form.get - PullRequest
Новая
       8

Flask - Получение NoneType при использовании request.form.get

0 голосов
/ 13 мая 2018

Я знаю, что об этом спрашивали несколько раз, но, к сожалению, я не могу полностью понять другие ответы, так как мои знания все еще очень ограничены.Мои попытки сводятся к тому, что я в основном путаюсь с методами POST и GET, а также пытаюсь request.form.get(), request.form[] и request.args.get(), но я получаю либо вышеупомянутую ошибку, либо ошибку method not allowed, либо bad requestошибка.

Я создал простой веб-сайт, где пользователь выбирает два числа (1 или 2), первое из раскрывающегося списка, а второе - из коэффициента.Вывод должен быть суммой этих чисел, однако, когда я нажимаю кнопку отправки, я получаю сообщение об ошибке 

TypeError: unsupported operand type(s) for +: 'NoneType' and 'NoneType'

Мое приложение на python выглядит так: 

from flask import Flask, render_template,request
app=Flask(__name__)

@app.route('/')
def main():
    return render_template('example.html')

@app.route('/model',methods=['GET','POST'])
def model():
    first=request.form.get('inputFirst',type=int)
    second=request.form.get('inputSecond',type=int)
    suma=first+second
    return render_template('final.html',suma=suma)

if __name__ == "__main__":
    app.run(debug=True)

Вотосновной html-файл (example.html) 

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <script src="../static/js/jquery-3.2.1.js"></script>
    <script src="../static/js/model.js"></script>
  </head>
  <body>
  <div class="container">
   <div class="jumbotron">
    <form>
      <h2>Choose one number</h2>
      <label for="firstNumber" class="sr-only">First Number</label>
      <select name="inputFirst" id="firstNumber" required>
      <option value="1" label="One">1</option>
      <option value="2" label="Two" selected>2</option>
      </select>

      <h2> Choose another number</h2>   
      <input type="radio" name="inputSecond" id="one1" value="1" required/>
      <label for="one1">1</label>
      <input type="radio" name="inputSecond" id="two2" value="2"/>          
      <label for="two2">2</label>
      <button onclick="location.href='/model'" id="btnModel" class="btn btn-lg btn-primary btn-block" type="button">Run model</button>
    </form>
   </div> 
  </div>
  </body>
</html>

Вот файл model.js 

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

А для вывода вот файл final.html 

<html>
<head>
<h1>RESULT</h1>
</head>
<body>
<h3>The result is: {{suma}} </h3>
</body>
</html>

В качестве последней попытки я попытался изменить request.form.get('inputFirst',type=int) на request.form.get('inputFirst',0,type=int) и аналогичным образом изменить request.form.get('inputSecond',type=int) на request.form.get('inputSecond',0,type=int), и в этом случае веб-сайт работает, поэтому, если я правильно понимаю, форма в example.html будетне сохраняя числа, выбранные пользователем, однако имена inputFirst и inputSecond в файле example.html соответствуют именам в методе запроса из файла python.Поэтому я не уверен, в чем будет проблема.

Любая помощь приветствуется.

Ответы [ 2 ]

0 голосов
/ 13 мая 2018

jQuery serialize () Метод создает текстовую строку в кодировке URL путем сериализации формы val.Ваши окончательные запросы выглядят так: 

/model?inputFirst=1&inputSecond=2

, а способ доступа к вашим значениям в колбе - 

inputFirst = request.values.get('inputFirst')
inputSecond = request.values.get('inputSecond')

Затем вы можете преобразовать их в целое число, как предлагал предыдущий ответ

РЕДАКТИРОВАТЬ Я добавлю основной рабочий пример.Я объединил мои html и javascript, уверен, что вы будете знать, как отделить и импортировать

HTML 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $("#myForm").submit(function(e) {
    e.preventDefault();
});

     function upload(){
            $.ajax({
   method: "POST",
   url: "/model",
   data: $('form').serialize(),
   success:function(res){
      var content = res;
        $("div").text(content);
   }
 });
            return false;
}


</script>
</head>
<body>

<body>
    <form id="myForm" method="post">
      <h2>Choose one number</h2>
      <label for="firstNumber" class="sr-only">First Number</label>
      <select name="inputFirst" id="firstNumber" required>
      <option value="1" label="One">1</option>
      <option value="2" label="Two" selected>2</option>
      </select>

      <h2> Choose another number</h2>   
      <input type="radio" name="inputSecond" id="one1" value="1" required/>
      <label for="one1">1</label>
      <input type="radio" name="inputSecond" id="two2" value="2"/>          
      <label for="two2">2</label>
      <button  id="btnModel" onclick="return upload();">Run model</button>
    </form>
   <div>Submitted info comes here</div>
  </body>

</body>
</html>

И на мой взгляд 

@app.route('/model',methods=['GET','POST'])
def model():
    if request.method == 'POST':
        inputFirst = request.values.get('inputFirst')
        inputSecond = request.values.get('inputSecond')
        if inputFirst is None:
            inputFirst = "Not Submitted"
        if inputSecond is None:
            inputSecond = "Not Submitted"
        return "firstInput: "+inputFirst+' '+ "secondInput: "+inputSecond
    else:
        return render_template('test.html')

К сведению , я отключил обычную отправку формы и обработал ее с помощью js.Это означает, что проверка вашей формы не будет работать.Вы можете включить проверку в JS.На данный момент я только что проверил, является ли введенное значение None в представлении.

Я создал div, который заменяется вашими представленными значениями при нажатии кнопки.Поскольку у вас может быть несколько элементов div (у меня есть только один в этом коде), вы можете присвоить элементу id идентификатор, чтобы он не заменял все ваши элементы div

Надеюсь, что это будет полезно

Я поместил метод формы как post, если вы получаете отправленные значения в URL с обновлением, вы, возможно, пропустили это, и ваш код выполняет метод get по умолчанию

0 голосов
/ 13 мая 2018

значения формы не будут целыми числами, вам нужно преобразовать строку в int 

first=request.form.get('inputFirst')
second=request.form.get('inputSecond')

sum = int(first) + int(second)
...