form表單提交

整理一下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方法來發送數據