ajax 异步提交表单的两种方式

表单示例

<form id="ajaxForm">
    <ul>
        <li>
            <span><i>*</i>被投诉对象:</span>
            <input type="text" name="c_name" placeholder="请输入您需要投诉对象">
            <small><i>*</i>此项为必填项,请填写后再提交</small>
        </li>
        <li>
            <span><i>*</i>投诉内容:</span>
            <textarea name="c_content" id="" cols="30" rows="10" placeholder="请输入您所要投诉的内容..."></textarea>
        </li>
        <li>
            <span><i>*</i>上传附件:</span>
            <span>
                {{--选择附件--}}
                <input type="file" name="img">
            </span>
        </li>
    </ul>
    {{ csrf_field() }}
    <div><button id="btnButton" type="button">提交</button></div>
</form>

提交方式一(ajaxSubmit提交)

//需要引用js,可自行下载,注意版本区分,可能会出现版本不兼容的情况
<script src="/js/jquery.js"></script>
<script src="/js/jquery.form.js"></script>

<script type="text/javascript">
        $(function() {
            $("#btnButton").click(function(){
                $('#ajaxForm').ajaxSubmit({
                    type:"post",  //提交方式
                    dataType:"json", //数据类型
                    url:"/i_complain/insert", //请求url
                    success:function(res){ //提交成功的回调函数
                        if(res.msg == 'ok'){
                            layer.msg(res.info);//打印回调信息
                            window.location.href = '/test';//自动跳转
                        }else{
                            layer.msg(res.info);
                        }
                    }
                });
                return false; //不刷新页面-------------必须写上
            });
        });
</script>

提交方式二(ajax直接提交)

<script type="text/javascript">
    $(function () {
        $("#btnButton").click(function () {
            $.ajax({
                type: 'post',
                data: $('#ajaxForm').serialize(),
                url: '/i_complain/insert',
                cache:false,
                dataType:'text',
                success: function (res) {
                    if(res.msg == 'ok'){
                        layer.msg(res.info)
                    }else{
                        layer.msg(res.info)
                    }
                }
            })
        });
    });
</script>