Form表单ajax提交数据不跳转

最新推荐文章于 2019-04-08 23:36:50 发布

转载最新推荐文章于 2019-04-08 23:36:50 发布 · 543 阅读

文章标签：

#ajax #jquery #表单

本文介绍了两种表单提交的方法：使用onsubmit属性配合JavaScript阻止默认提交行为，以及通过AJAX实现异步提交。详细展示了如何用jQuery进行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" action="servlet" method="post"onsubmit="return sub();">
    <input id="input1" /> 
    <input id="input2" /> 
    <input id="input3" />
    <input type="button" value="提 交" onclick="sub()"/>
</form>