ajax提交表单数据不跳转

1.onsubmit

form表单的onsubmit方法在submit执行之前提交表单

<script type="text/javascript">
    function sub() {
        // jquery 表单提交
        $("#formId").ajaxSubmit(function(message) {
        // 对于表单提交成功后处理，message为返回内容
        });   

        return false; // 必须返回false，否则表单会自己再做一次提交操作，并且页面跳转
    }   

</script>
<form id="formId" action="servlet" method="post"onsubmit="return sub();">
    <input type="submit" value="提交"/>
</form>

2.ajax提交

<script type="text/javascript">
    function sub() {
        $.ajax({
                cache: true,
                type: "POST",
                url:"Servlet",
                data:$(‘#formId‘).serialize(),// 你的formid
                async: false,
                error: function(request) {
                    alert("Connection error:"+request.error);
                },
                success: function(data) {
                    alert("SUCCESS!");
                }
            });
    }
</script>
<form id="formId"  method="post"">
    <input id="input1" />
    <input id="input2" />
    <input id="input3" />
    <input type="button" value="提 交" onclick="sub()"/>
</form>

注意问题：

button 如果设置为 type="submit"，会出现提交两次的问题，请把submit设置为type="button"

原文地址：https://www.cnblogs.com/woniu666/p/9901776.html