Question

我试图使用javascript添加两个运算符然后我希望在ajax中尝试它然后我想看到两个代码之间的区别动作但是每当我在javascript中实现添加时我都被卡住了因为该页面显示结果为一秒然后它重定向回来。任何人都可以告诉我这段代码有什么问题吗？

<!DOCTYPE html>
<html>
<head>
    <title>ajax</title>
    <script>
        function loadFunction(){
            //window.alert("hello");
            var x= document.getElementById("d1");
            var y =document.forms["myForm"]["op1"].value;
            var z =document.forms["myForm"]["op2"].value;
            x.innerHTML="<h2>" +(parseInt(y)+parseInt(z)) + "</h2>";
            x.style.width="35%";
            x.style.border="1px solid #050";    
        }
    </script>
</head>
<body>
    <form id="myForm" onsubmit="loadFunction()" method="POST">
        <input type="text" id="op1" placeholder="operator 1" required></input> + 
        <input type="text" id="op2" placeholder="operator 2" required></input>
        <button type="submit">show the result</button>
    </form>
    <div id="d1">
        <h2>The summation will print here!!!</h2>
    </div>      
</body>
</html>

Answer 1

每次提交表单时浏览器执行的默认操作就是进行重定向。你必须明确地关闭它。为此，添加event.preventDefault()，如下所示：

<script>
    function loadFunction(event){
        //window.alert("hello");
        var x= document.getElementById("d1");
        var y =document.forms["myForm"]["op1"].value;
        var z =document.forms["myForm"]["op2"].value;
        x.innerHTML="<h2>" +(parseInt(y)+parseInt(z)) + "</h2>";
        x.style.width="35%";
        x.style.border="1px solid #050";

        event.preventDefault();    
    }
</script>

Answer 2

另一种可能性是{on}提交return false：

<script>
    function loadFunction(){
        //...
        return false;
    }
</script>

和

<form id="myForm" onsubmit="return loadFunction()" method="POST">

然后，您可以通过从true返回false或loadFunction()来控制是否应提交表单。

在javascript中提交表单后重定向页面

2 个答案: