preventDefault（）不会阻止页面刷新

Question

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

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

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

我已经做了所有事情，因为它说和页面 - 令人惊讶的 - 工作。唯一的问题是，即使使用preventDefault()函数，每当我按“提交”时它仍然会保持刷新页面。它应该在Flask中用我在下面的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>

这是烧瓶：

@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});

最后是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);
            }
        });
    });
});

我究竟做错了什么？

Answer 1

在这种情况下你可以使用e.stopImmediatePropagation()

或者给形式和使用id

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

Answer 2

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

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

     // code

     return false;
});

Answer 3

你没有将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>

Answer 4

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

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

至

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

会解决你的问题

希望这可以帮助！