Question

我只是想在控制台中显示数据。由于某种原因，它只会刷新结果并刷新控制台。我正在服务器上运行html文件。

代码-

<html>
<body>
<form>
    <label>Name:</label>
    <input type="text" id="fname" >
    <label>Email:</label>
    <input type="text" id="email" >
    <input type="submit" value="Submit" id="fetch">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#fetch').click(function(){
        var str = $("#fname").val();
        console.log(str);
        });
 
</script>
</body>
</html>

我无法调试它。有什么建议吗？

Answer 1

您需要return false才能防止重新加载：

$('#fetch').click(function(){
        var str = $("#fname").val();
        console.log(str);
        return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <label>Name:</label>
    <input type="text" id="fname" >
    <label>Email:</label>
    <input type="text" id="email" >
    <input type="submit" value="Submit" id="fetch">
</form>

防止默认行为的另一种方法：

$('#fetch').click(function(e){
        e.preventDefault();
        var str = $("#fname").val();
        console.log(str);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <label>Name:</label>
    <input type="text" id="fname" >
    <label>Email:</label>
    <input type="text" id="email" >
    <input type="submit" value="Submit" id="fetch">
</form>

Answer 2

单击提交按钮将提交表单，从而刷新页面，这就是清除控制台的原因。

由于您使用的是jQuery，因此可以在return false;之后添加console.log(str);，因此原始操作（此处为表单提交）将被取消。

控制台不显示数据

2 个答案: