通过submit提交的表单怎么实现ajax提交

最新推荐文章于 2024-04-04 08:44:26 发布

strive_day

最新推荐文章于 2024-04-04 08:44:26 发布

阅读量2.8k

点赞数 13

分类专栏：每日学习文章标签： submit ajax提交submit submit提交ajax ajax提交

本文链接：https://blog.csdn.net/qq_40542534/article/details/108876978

版权

每日学习专栏收录该内容

20 篇文章 3 订阅

订阅专栏

本文介绍了如何在HTML表单中利用jQuery的Ajax方法，结合submit事件来实现在不刷新页面的情况下提交表单。关键在于阻止submit事件的默认行为，即返回false，然后利用Ajax进行数据提交，确保表单数据能够通过异步方式发送到服务器并处理响应。

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

通过ajax实现对submit表单的提交

我们知道，ajax提交是不能使用submit的，如果用submit会直接跳过ajax提交。如果你一定要用submit来提交表单，并且又要使用ajax实现表单的提交，就将submit的返回值设置为false。
submit提交表单，如果返回为true，表单直接提交；返回为false，表单就不提交(这时候就可以交给ajax来实现表单提交了)
submit提交，又要使用ajax提交表单，需要在submit提交的时候返回false，将其拦截下来，使其不提交，然后交给ajax提交就行。

案例

表单通过submit方式提交

<form id="loginForm" action="" method="post" accept-charset="utf-8">
...
	<input type="submit" value="登录" id="loginBtn">
</form>

要实现ajax完成提交只需要将其返回值设置为false

	$("#loginForm").submit(function () {
		//写false，表示拦截
		return false;
	})

完整实现

        $("#loginBtn").click(function () {
            //要求两个值正确，我们才做提交
            if (checkUserName() && checkPassword()) {
                var un = $("#username").val()
                var pw = $("#password").val()
                //alert(un+pw)
                //写提交
                $.ajax({
                    url: "loginServlet",
                    async: true,
                    data: "username=" + un + "&password=" + pw,
                    type: "post",
                    dataType: "json",
                    success: function (data) {
                        alert(data)
                    },
                    error: function () {
                        alert("服务器发生了错误")
                    }
                });
            }
        })