实现ajax提交表单，页面不跳转

最新推荐文章于 2024-09-02 09:30:00 发布

原创最新推荐文章于 2024-09-02 09:30:00 发布 · 2.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #js #java #表单

本文介绍了一个使用HTML和JavaScript实现的表单示例，其中包括文本输入框和文本区域，并通过JavaScript进行表单验证和提交处理。

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

表单代码

             <form id="save" class="form-horizontal" role="form"
                  method="post" action="${request.getContextPath()}/yuyue/saveBingli.do">
                <div class="form-group">
                    <label id="username" class="col-sm-2 control-label"> </label>
                    <div class="col-sm-6">
                        <input id="username" type="text" name="username" class="form-control"
                               value="${editBingliObj.username}" readonly="readonly"/>
                    </div>
                </div>
                <div class="form-group">
                    <label for="symptom" class="col-sm-2 control-label"></label>
                    <div class="col-sm-6">
                        <textarea id="symptom" name="symptom" class="form-control" rows="2"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label for="content" class="col-sm-2 control-label"></label>
                    <div class="col-sm-6">
                        <textarea id="content" name="content" class="form-control" rows="4"></textarea>
                    </div>
                </div>
                <div class="form-group">
                     <div class="col-sm-offset-2 col-sm-6">
                         <button type="button" class="btn btn-primary" onclick="save();">保存</button>
                     </div>
                </div>
            </form>

js代码：

function save(){
    if($("#symptom").val()!=""&&$("#content").val()!=""){
        $("#save").submit();
    }
}
var contextPath;
$(function(){
    contextPath=$("#contextPath").val();

    $("#save").submit(function(){
        $.ajax({
            type : "post",
            url : contextPath+"/yuyue/save.do",
            data : $("#save").serialize(),
            success : function(){

            }
        });
        return false;
    });
});

为表单的按钮绑定事件，点击时验证表单，满足条件下提交表单，为表单绑定submit事件，提交的时候返回false阻止默认事件，ajax提交表单。