ajax在button中使用onclick失效原因

最新推荐文章于 2021-08-05 12:57:11 发布

弟弟小王

最新推荐文章于 2021-08-05 12:57:11 发布

阅读量1.3w

点赞数 10

CC 4.0 BY-SA版权

分类专栏： PHP 文章标签： function jquery

本文链接：https://blog.csdn.net/dhywjx/article/details/79661805

PHP 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了在页面提交过程中，使用button的onclick方法绑定AJAX请求无法正常工作的问题，并对比了使用click方法的成功案例。分析了两种方法的区别，解释了为何使用click方法能确保文档加载完成后才执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做页面提交的时候，发现通过button中onclick绑定的方法时，怎么也无法提交ajax请求，但是使用click方法的时候确实可以成功。因缺思厅。这里做下分析。先看下代码

1、使用onclick方法

<input id="login" name="" onclick="login()" type="button" class="btn btn-success radius size-L col-xs-3" value=" 登    录 ">

function login() {
        $.ajax({
            type:"POST",
            url:"{:url('admin/login/check')}",
            data:$("form").serialize(),
            dataType:'json',
            success: function(data) {
                    if (data.status == 1) {
                        window.location.href="{:url('index/index')}";
                    }else {
                        alert(data.message);
                    }
            }
        });
    }

2、使用click方法

$(function(){
        $("#login").on('click',function (event) {
            $.ajax({
                type:"POST",
                url:"{:url('admin/login/check')}",
                data:$("form").serialize(),
                dataType:'json',
                success: function(data) {
                    if (data.status == 1) {
                        window.location.href="{:url('index/index')}";
                    }else {
                        alert(data.message);
                    }
                }
            });
        })
    })