form表单提交 - Favour丶in

整理一下form表单的提交方式

　　1.form传统提交

　　　　文本提交：　　　　

<form id="form_box" action="{:U(\'Api/test\')}"  method="post">
        <input name="nickname">
        <input type="submit" value="提交">
</form>

　　　　文本图片提交：　　　　　

<form id="form_box" action="{:U(\'Api/test\')}"  method="post" enctype="multipart/form-data">
        <input name="nickname">
        <input type="file" name="file" id="file">
        <input type="submit" value="提交" onclick="return check()">
</form>

• 　　input按钮状态为submit
• 　　action为跳转url
• 　　method为请求方式

　　如果包含了图片上传，必须修改编码类型为“multipart/form-data”，否则接收不到值

　　

function check() {
        var nickname=$("input[name=\'nickname\']").val();
        if(!nickname){
            toastr.error(\'昵称不能为空\');
            return false;  //阻止提交
        }
        var file=$("input[name=\'file\']").val();
        if(!file){
            toastr.error(\'图片不能为空\');
            return false;
        }
        // 检查是否是图片
        var fileFormat = file.substring(file.lastIndexOf(".")).toLowerCase();
        if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
            toastr.error(\'上传错误,文件格式必须为：png/jpg/jpeg\');
            return false;
        }
    }

check方法是对空值进行判断，h5新特性可以设置属性required 要求必填

　2.jquery提交

　　　　文本提交：　　　　

　　　　<form id="form_box" method="post">
       　　 <input name="nickname">
      　　  <input type="submit" value="提交">
　　　　</form>　　　　　　　

 　　　　$(\'#form_box\').submit(function () {
            var data = $(\'#form_box\').serializeObject();
            console.log(data);
            $.post("{:U(\'Api/test\')}",data,function (res) {
　　　　　　　　//$(\'#form_box\')[0].reset();
            })
　　　　　　　　// return false;
　　　　　　})

　　　以上操作提交，页面会刷新，根据业务需求，我们可以阻止刷新，并对表单内容进行重置。

　　　serializeObject()方法是对表单元素的序列化，返回的是对象　　　　　　

　　$.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || \'\');
            } else {
                o[this.name] = this.value || \'\';
            }
        });
        return o;
    }

 

　

　　　　文本图片提交：　　　　

<form id="form_box" method="post" enctype="multipart/form-data">
        <input name="nickname" value="">
        <input type="file" name="file" id="file">
        <input type="submit" value="提交">
</form>

　　　　$(\'#form_box\').submit(function () {
            var formData = new FormData();
            formData.append(\'file\', $(\'#file\')[0].files[0]);
            formData.append(\'name\',\'哈哈\');
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "{:U(\'Api/test\')}" ,//url
                data: formData,
                contentType:false,  //为false才为正确类型
                processData:false,  //为false不需要处理转换信息
                success: function (res) {
                    console.log(res,\'返回\');
                }
            });
        })

　　　　　　由于文件流是无法被serializeArray()方法序列化的，所以改用FormData()

　　　　　　FormData

　　　　　　　　用以将数据序列化,其主要用于发送表单数据

　　　　　　　　如果表单enctype属性设为multipart/form-data ，则会使用表单的submit方法来发送数据