Why does 400 Bad Request: KeyError occur when filling out a form?

Question

Python

There are 2 functions that, by clicking on the "OK" button, should return a response to the page using ajax, respectively, there are 2 ajax functions for them. Both functions are almost identical, but the second does not work.
Second function code:

@app.route('/act_2', methods = ['GET', 'POST'])
def act_2():
  #try:
    foo = guard(request.form['foo'])
    y0 = float(guard(request.form['y0']))
    h = float(guard(request.form['h']))
    a = float(guard(request.form['a']))
    b = float(guard(request.form['b']))
    method = request.form['method'] 
    ans = acting_2(foo, y0, h, a, b, method)
    return json.dumps({'act_2': ans})

  #except:
    #err = "Ошибка"
    #return json.dumps({'act': err})

ajax code for second function:

function act_2() {
        $.ajax({
          type: "POST",
          url: "/act_2",
          data: $('form_2').serialize(),
          type: 'POST',
          success: function(response) {
            var json = jQuery.parseJSON(response)
            $('#act_2').html(json.act)
            console.log(response);
          },
          error: function(error) {
            console.log(error);
          }
        });
      }

Error:

Form itself:

<form action = "/act_2" method="POST" name="form_2">
      <p>
        y' = <input type="text" name="foo"><br>
      </p>
      <p>y(0) = <input type="text" name="y0" size="1"></p>

etc.
And the same with the first function, but which works:

@app.route('/act', methods = ['GET', 'POST'])
def act():
  try:
    foo = guard(request.form['foo'])
    a = float(guard(request.form['a']))
    b = float(guard(request.form['b']))
    e = float(guard(request.form['e']))
    method = request.form['method']
    est = int(request.form['est'])
    ans = acting(foo, a, b, e, method, est)
    return json.dumps({'act': ans})

function act() {
        $.ajax({
          type: "POST",
          url: "/act",
          data: $('form').serialize(),
          type: 'POST',
          success: function(response) {
            var json = jQuery.parseJSON(response)
            $('#act').html(json.act)
            console.log(response);
          },
          error: function(error) {
            console.log(error);
          }
        });
      }

<form action = "/act" method="POST" name="form">
      <p>
        <input type="text" name="b" size="1"><br>
        <font size="20">∫</font>
        <input type="text" name="foo"> dx<br>
        <input type="text" name="a" size="1">
      </p>

etc.
By mistake, solutions are found in changing different names of names from the form and names in the request in python, but they are the same for me.
I will also add that if you uncomment exceptions on the server side, then the "error" message is returned on the page, that is, ajax itself, in theory, works. The problem is that the form either doesn't exist or thinks it doesn't accept anything.

Answer 1

What do you think the selector should return $('form_2')? If you want to get the form by name, then it should look like this $('[name="form_2"]').