16.取消a标签或者from表单默认提交事件

最新推荐文章于 2023-08-15 19:13:06 发布

忙碌的上帝シ

最新推荐文章于 2023-08-15 19:13:06 发布

阅读量781

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_41905827/article/details/106222634

版权

javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

当a标签只想作为一个按钮来使用时，需要把a标签的默认提交事件取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
        在某些时候，我们需要使用a标签作为按钮来使用，但是我们有不想让其 href生效，
        那么在href中返回false即
        javascirpt: return false;或者javascirpt: viod(0);
    -->
    <a href="javascirpt: return false;" onclick="clickA()">百度</a>
</body>
<script>
    function clickA() {
        console.log('=======')
    }
</script>
</html>

工作中表单都是使用ajax异步提交数据，
通过在from标签中添加οnsubmit=“javascirpt: return false;” 可阻止表单默认提交事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- οnsubmit="javascirpt: return false" 阻止表单默认提交事件 -->
    <form onsubmit="javascript: return false;">
        Username: <input type="text" id="username"> <br>
        Password: <input type="password" id="password"> <br>
        <button onclick="submitLoginForm()">提交</button>
    </form>
</body>
<script>
    // 未来我们的登录都是采取异步的方式来登录
    function ajax(url, method, proccess, params) {
        if(!url.trim()) {
            console.log('url 为必选参数.')
            return;
        }

        // 初始化异步请求的对象
        var xhr = new XMLHttpRequest();

        // 监听请求过程状态的变化
        xhr.onreadystatechange = function() {
            // 服务器端放回了数据，并且数据正确
            if(xhr.readyState == 4 && xhr.status == 200) {
                var loginInfo = JSON.parse(xhr.responseText);  // {"message":"登录成功"}
                // console.log(loginInfo)
                location.href = 'https://www.baidu.com';
            }
        }

        //如果用户名没有传入 method, 默认走GET
        if(!method || 'GET' == method.toUpperCase()) {
            // 初始化请求
            xhr.open('GET', url);
            // 发送请求
            xhr.send();
        }else {
            xhr.open('POST', url);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            xhr.send(params)
        }
    }

    // 采取异步的方式来提交表单
    function submitLoginForm() {
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;

        ajax('http://localhost:8081/cascade_war_exploded/login', 'POST', null, 'username=' + username + "&password=" + password);
    }
</script>
</html>

忙碌的上帝シ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
16.取消a标签或者from表单默认提交事件

当a标签只想作为一个按钮来使用时，需要把a标签的默认提交事件取消<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <!-- 在某些时候，我们需要使用a标签作为按钮来使用，但是我们有不想让其 href生效， .
复制链接

扫一扫