码迷,mamicode.com
首页 > Web开发 > 详细

ajax提交表单数据不跳转

时间:2018-11-03 20:11:44      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:form表单   数据   success   返回   form   function   jquer   sha   ali   

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"

ajax提交表单数据不跳转

标签:form表单   数据   success   返回   form   function   jquer   sha   ali   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!