AJAX提交表单 H5input的部分属性（required）仍然有效

最新推荐文章于 2023-03-24 10:33:55 发布

liyuan丶

最新推荐文章于 2023-03-24 10:33:55 发布

阅读量1.5k

点赞数

分类专栏：学习感悟文章标签： ajax h5

本文链接：https://blog.youkuaiyun.com/qq_39471470/article/details/84886382

版权

学习感悟专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的表单提交案例，通过AJAX进行异步提交，避免了页面刷新，提供了更好的用户体验。代码中包含了表单元素、jQuery库的引入以及提交函数的定义。

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

HTML代码

<form onsubmit="comment()" id="form_comment" action="javascript:void(0)">
	<input type="text" name="article_id" />
	<li class="list-group-item">
		<textarea name="content" class="form-control" rows="10" style="resize:none;" required></textarea>
		<button class="btn btn-default" type="submit">提交</button>
	</li>
</form>

JS代码

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    function comment() {
        $.ajax({
            url:"action/commentAction.php",	//提交地址
            type:"post",	//提交方式
            data:$('#form_comment').serialize(),	//表单内所有信息
            success: function (result) {
            	var obj=JSON.parse(result)
                if(obj.type=="请登录")
                {
                    window.location.href='login.php';
                }
                else if(obj.type=="发表成功")
                {
                    location.reload()
                }
                else
                {
                    alert("异常")
                }
            },
            error : function(result) {
                console.log(result)
            }
        });
    };
</script>