点击submit后,刷新数据,但是页面还是当前页面

点完submit(确定按钮)后,会跳转到其他页面,怎么阻止跳转,并且在当前页面刷新数据。图片描述

图片描述

阅读 7.1k
3 个回答

那得用AJAX技术了.

document.querySelector('#btn').addEventListener("click",function(){
    //dosomething 包括当前页面刷新数据的操作
    
    return false;    //阻止页面跳转
},false)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        form {
            text-align: center;
            margin: 100px 0 0 0;
        }
    </style>
</head>

<body>
    <form action="#" onsubmit="return false">
        <p>
            <span>姓名:</span>
            <input type="text" name="" id="">
        </p>
        <p>
            <span>执行方式:</span>

            <label for="test1">
                        手动:<input type="radio" name="test" id="test1">
                </label>
            <label for="test2">
                        自动:<input type="radio" name="test" id="test2">
                </label>
        </p>
        <input type="submit" value="提交">
    </form>
</body>

</html>

<script>
    // 阻止跳转
    var inp = document.querySelector('input');
    inp.addEventListener('click', function() {
        // 1.获取表单元素中的值
        // 2.ajax发送表单数据
        // 3.将响应回来的数据渲染到页面
    })
</script>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题