Jquery 异步提交表单有form无form的时候处理方式

无Form表单的时候，即普通按钮提交时的写法：

前台部分代码：

<div id='error'></div><!--错误提示信息-->

<input type='text' id='username' name='username' readonly='Readonly'/><!--readonly为只读-->

<input type='password' id='password' name='password'>
<input type='text' id='company' name='company'>
<input type='text' id='mobile' name='mobile'>
<input type='text' id='email' name='email'>
<button type='button' onclick='edit();'></button>


<script>
    function edit(){
        var password = $('#password').val();
        var company = $('#company').val();

        if(password == ''){
             $('error').show();
             $('error').html("密码不能为空!");
             return.false;
        }
        else if(company == ''){
             $('error').show();
             $('error').html("公司名称不能为空!");
             return.false;
        }else if(mobile.length<11){
             $('error').show();
             $('error').html("手机号码不正确!");
             return.false;
        }else if(email){
            var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/;
            if(!myreg.test(email)){
                $('#error').show();
                $('#error').html("Email格式不正确！");
                return false;
        }
        else{
            $('#error').hide();
        }
        get_url = "{:U('Index/settingsave')}";
        $.ajax({
            url:get_url,
            type:'POST',
            data:{'password':password,'company':company,'mobile':mobile,'email':email},
            cache:false,
            dataType:"json",
            success:function(data){
                if(data.status == "success"){
                    $('#error').show();
                    $('#error').html(data.Msg);
                }else{
                    $('#error').show();
                    $('#error').html(data.Msg);
                }
            }
        });
        return false;
    }
</script>

后台部分代码：

<?php
    public function settingsave(){

        $user=M("user");
        $id=session("userid");
        $password=I("post.password");
        $data['Company']=I("post.company");
        $data['Mobile']=I("post.mobile");
        $data['Email']=I("post.email");


        if($password!=''){
            $data['Password']=md5($password);
        }
        $condition['Id']=$id;
        $result = $user->where($condition)->save($data);

        if($result !== false) {
            echo  '{"status":"success","Msg":"修改成功"}';

            die();
        }else{
            echo  '{"status":"false","Msg":"修改失败"}';

            die();        

}
    }
?>










form表单只提交值，而不进行页面跳转

一般的form提交操作写法为

1. <form action="saveReport.htm" method="post">  
2.     ……  
3.     <input type="submit" value="保存报告"/>  
4. </form>  

点击submit按钮或直接回车可以将数据提交到saveReport页面，但是提交后也会跳转到saveReport页面

 

如何做到

将数据提交到saveReport（form的action指向）页面，但是页面又不进行跳转，即保持当前页面不变呢？？

这种需要在load一个页面的时候尤其迫切。

利用jquery的ajaxSubmit函数以及form的onsubmit函数完成，如下：

1. <form id="saveReportForm" action="saveReport.htm" method="post" onsubmit="return saveReport();">  
2.     <input type="submit" value="保存报告"/>  
3. </form>  

form增加一个id用于在jquery中调用，增加一个onsubmit函数用于submit前自己提交表单

 

saveReport对应函数为

1. function saveReport() {  
2.     // jquery 表单提交  
3.     $("#showDataForm").ajaxSubmit(function(message) {  
4.           // 对于表单提交成功后处理，message为提交页面saveReport.htm的返回内容  
5.        });  
6.       
7.     return false; // 必须返回false，否则表单会自己再做一次提交操作，并且页面跳转  
8. }  

 上述js已经进

无Form表单的时候，即普通按钮提交时的写法：