【无标题】

最新推荐文章于 2024-09-27 00:45:01 发布

HighJ

最新推荐文章于 2024-09-27 00:45:01 发布

阅读量577

点赞数

分类专栏：笔记文章标签： java javascript bootstrap jquery

本文链接：https://blog.csdn.net/weixin_46544896/article/details/121632820

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了HTML中submit和button类型按钮在表单提交时的区别。当button的type设置为submit时，点击该按钮会直接提交表单，绕过JavaScript的处理。而在需要通过JS控制表单行为时，应将button的type改为button，以确保onclick事件能够正常调用query()函数，实现预期的功能。博主提醒开发者不要盲目复制Bootstrap代码，需理解其工作原理。

摘要由CSDN通过智能技术生成

html中submit和button的区别导致的bug：

   <form target=_parent class="text-center">
        <div class="form-group">
            <input id="queryname" name="queryname" type="text" placeholder="Enter Name">
            <button type="submit" class="btn btn-default" onclick="query();">Search</button><!--注意此处button的type-->
        </div>
    </form>

    function query() {
        var query_name = $('#queryname').val();//取得上面用户输入的姓名
        $('#myModal').modal('show')
        $.ajax({
            url: '/webapi/student/query/' + query_name//调用controller层的服务来根据姓名查找
        }).done(function (rs) {//将查找结果显示在html上
            $("#id").val(rs.id);
            $("#name").val(rs.name);
            $("#password").val("");
            $("#sex").val(rs.sex);
            $("#score").val(rs.score);
            $("#num").val(rs.num);
        })
    }

在上面的代码中我们要做的是在用户在input输入框在输入姓名后，点击searche按钮，我们通过query（）函数先取得用户输入的姓名，而后调用controller层服务来根据姓名查询，而此处search这个button的类型为submit时，是无法完成上述功能的因为submit这个类型的按钮在点击时会自动提交form表单给服务器而没有通过js的处理，而要通过onclick来调用js中某个函数来处理的话就需要将search按钮的类型改为button类型。
注：看来bootstrap上的代码不能无脑复制粘贴拿来使用