Question

在我的项目中，我有以下JS和HTML代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>

function myFunction() {
    //document.getElementById('demo').innerHTML = Date();
    alert("done");
    var a = parseInt(document.getElementById('number1').value);
    var b = parseInt(document.getElementById('number2').value);
    var c = a + b;
    $.get('/_add_numbers',{number: c}, function(data,status){
        res = JSON.parse(data);
        alert(status);
        $("#feedback").text("change");
        alert("show");
    });
};

</script>
</head>
<body>
<h1>My First JavaScript V2</h1>
<p id="demo"></p>
<form onsubmit="myFunction()">
    <input type="text" size="5" name="a" id = "number1"> +
    <input type="text" size="5" name="b" id = "number2"> =
    <span id="result">?</span>
    <br>
    <input type="submit" value="calculate server side" >
</form>
<p id="feedback">feedback</p>
</body>
</html>

警报显示状态成功。

该段落的内容转为＆＃34;更改＆＃34;，但最终改回原来的＆＃34;反馈＆＃34;。那是什么原因？

Answer 1

内容不是更改。实际上，表单正在提交，页面基本上正在刷新。

您需要在提交事件上调用import csv with open('eggs.csv', 'wb') as csvfile: spamwriter = csv.writer(csvfile, delimiter=' ', quotechar='|', quoting=csv.QUOTE_MINIMAL) spamwriter.writerow(['Spam'] * 5 + ['Baked Beans']) spamwriter.writerow(['Spam', 'Lovely Spam', 'Wonderful Spam'])以阻止表单提交，如下所示：

.preventDefault();

或者更好的是，完全抛弃表单，将function myFunction(evt) { evt.preventDefault(); // ... other code };更改为type="submit"，然后将事件处理程序附加到按钮，如下所示：

type="button"

Answer 2

如果我们使用提交按钮，则会在页面上发回。要解决该解决方案，您可以使用以下

<input type="button" value="calculate server side" onclick="myFunction()" >

使用此功能，您无需创建表单标记

Answer 3

这是因为表单的默认行为。只需在单击“提交”按钮时提交。如果你不这样做那么ajax的目的是没用的。

解决方案是使用event.preventDefault ();停止表单的默认行为：

 onsubmit="myFunction(event)"

现在在函数中使用它：

function myFunction(e){
    e.preventDefault();// will stop the form submission
    // rest of the code
}

在onsubmit事件

3 个答案: