preventDefault（）不会阻止页面刷新

So, a bit of background for starters.

所以，初学者的一些背景知识。

I'm following the link below to do a simple post request.

我正在按照下面的链接做一个简单的帖子请求。

https://codehandbook.org/python-flask-jquery-ajax-post/

I have done everything as it says and the page -surprisingly- works. The only problem is that it still keeps refreshing the page whenever I press "submit" even with the preventDefault() function in it. It is supposed to do some stuff in Flask with the variables I give it in the HTML below and before I get to that I would like to get rid of this little annoyance.

我已经做了所有的事情，因为它说和页面 - 令人惊讶的 - 工作。唯一的问题是，即使使用了preventDefault（）函数，每当我按“提交”时它仍然会保持刷新页面。它应该在Flask中用我在下面的HTML中给出的变量做一些事情，在我开始之前我想摆脱这个小烦恼。

Here's my HTML:

这是我的HTML：

<fieldset>
<form>
    Yrityksen nimi: <input name="Yrityksennimi" type="text" id="YN"  placeHolder="yritys" ></input><br>
    Ennustettu kasvu: <input name="Ennustettukasvu" type="number" min="1" max="2" step="0.001" value="1" id="kasvu"><br>
    Diskonttokorko: <input name="Diskonttokorko" type="number" min="0" max="1" step="0.001" value="0" id="DK"><br>
    BKT: <input name="BKT" type="number" min="0" max="1" step="0.001" value="0" id="BK"><br>
    Osakkeiden yhteenlaskettu määrä: <input name="Osakkeidenyhteenlaskettumaara" type="number" min="0" max="1000000000000000000000000" step="1" value="0" id="OM"><br>
    Vapaa kassavirta: <input name="Vapaakassavirta" type="number" min="0" max="1000000000000000000000000" step="0.1" value="0" id="KV"><br>
    Mittausajan pituus: <input name="Mittausajanpituus" type="number" min="0" max="100" step="1" value="0" id="MP"><br>
    <input type="submit" name="submit" id="submit"></input>
</form>
</fieldset>

Here's the Flask:

这是烧瓶：

@app.route('/DCF-calculator', methods =['POST'])

def DCFcalc():

    n = request.form['Yrityksennimi'];
    g = request.form['Ennustettukasvu'];
    dr = request.form['Diskonttokorko'];
    gdp = request.form['BKT'];
    s = request.form['Osakkeidenyhteenlaskettumaara'];
    f = request.form['Vapaakassavirta'];
    v = request.form['Mittausajanpituus'];
return json.dumps({'status': 'OK', 'YN':n, 'kasvu':g, 'DK':dr, 'BK':gdp,'OM':s,'KV':f,'MP':c});

And finally the JavaScript:

最后是JavaScript：

$(document).ready(function() {
    $('submit').click(function(e) {
        e.preventDefault();
        var YN = $('#YN').val();
        var kasvu = $('#kasvu').val();
        var DK = $('#DK').val();
        var BK = $('#BKT').val();
        var OM = $('#OM').val();
        var KV = $('#KV').val();
        var MP = $('#MP').val();
        $.ajax({
            url: '/DCF-calculator',
            data: $('form').serialize(),
            type: 'POST',
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

What am I doing wrong?

我究竟做错了什么？

4 个解决方案

#1

You can use e.stopImmediatePropagation() in such cases

在这种情况下，您可以使用e.stopImmediatePropagation（）

Or give id to form and use

或者给形式和使用id

 $("#formid"). submit (function (e){e.preventDefault(); });

#2

change your code to catch submit event of the form and use preventDefault and return false

更改您的代码以捕获表单的提交事件并使用preventDefault并返回false

$('form').submit(function(e) {
     e.preventDefault();

     // code

     return false;
});

#3

You are not binding the click event to the button, this $('submit') doesn't bind to the submit button, use the id of the submit button $(#submit).

你没有将click事件绑定到按钮，这个$（'submit'）没有绑定到提交按钮，使用提交按钮$（＃submit）的id。

$(document).ready(function () {
        $('#submit').click(function (e) {
            e.preventDefault();
            var YN = $('#YN').val();
            var kasvu = $('#kasvu').val();
            var DK = $('#DK').val();
            var BK = $('#BKT').val();
            var OM = $('#OM').val();
            var KV = $('#KV').val();
            var MP = $('#MP').val();
            //uncomment this lines
            // $.ajax({
            //     url: '/DCF-calculator',
            //     data: $('form').serialize(),
            //     type: 'POST',
            //     success: function (response) {
            //         console.log(response);
            //     },
            //     error: function (error) {
            //         console.log(error);
            //     }
            // });
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    Yrityksen nimi: <input name="Yrityksennimi" type="text" id="YN" placeHolder="yritys"></input><br>
    Ennustettu kasvu: <input name="Ennustettukasvu" type="number" min="1" max="2" step="0.001" value="1" id="kasvu"><br>
    Diskonttokorko: <input name="Diskonttokorko" type="number" min="0" max="1" step="0.001" value="0" id="DK"><br>
    BKT: <input name="BKT" type="number" min="0" max="1" step="0.001" value="0" id="BK"><br>
    Osakkeiden yhteenlaskettu määrä: <input name="Osakkeidenyhteenlaskettumaara" type="number" min="0"
                                            max="1000000000000000000000000" step="1" value="0" id="OM"><br>
    Vapaa kassavirta: <input name="Vapaakassavirta" type="number" min="0" max="1000000000000000000000000" step="0.1"
                             value="0" id="KV"><br>
    Mittausajan pituus: <input name="Mittausajanpituus" type="number" min="0" max="100" step="1" value="0" id="MP"><br>
    <input type="submit" name="submit" id="submit"></input>
</form>

#4

-1

as long as you use "submit" type, the form still submit and refresh the page. Change

只要您使用“提交”类型，表单仍然会提交并刷新页面。更改

<input type="submit" name="submit" id="submit"></input>

至

<input type="button" name="submit" id="submit"></input>

will solve your problem

会解决你的问题

Hope this helps!

希望这可以帮助！

#1