日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 >

easyui form提交和formdata提交记录,查看FormData对象内部的值

發布時間:2025/3/15 31 豆豆
生活随笔 收集整理的這篇文章主要介紹了 easyui form提交和formdata提交记录,查看FormData对象内部的值 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1 ?easyui form提交

$('form').form('submit',{url:'';onSubmit:'';success:function(data){//這種方法獲取到的data是字符串的形式,需要將數據進行轉化方可利用其內部的數據data=JSON.parse(data);if(data.result){} } })

提交的數據是利用jquery 中的serialize()方法,將表單中的數據轉化為請求字符串的形式,我們可以使用$('form').serialize();來查看要提交的數據;

但是在此過程中一定注意若表單中有類似textarea的控件 ,且在輸入域中輸入了空格,獲取到的參數信息會轉化為‘+’號(par1=other&par2=-1&par3=sss+fffff++ffff)

是因為URL規范里就是要求空格在query string里被編碼為加號吧

詳見(https://en.wikipedia.org/wiki/Query_string#URL_encoding)

注:類似于$().serialize() 方法還有 $().serializeArray 和$().param(arr)方法,可以查看jquery手冊學習

??  $("#results").append( "<tt>" + $("form").serialize() + "</tt>" );

2 ?formData提交

新建FormData對象時有兩種方將數據加載到實例對象中,其中之一是利用FormData對象的append方法,其二是將form表單元素作為參數傳遞到FormData構造函數內;如下:

(1) var fd = new FormData(); fd.append("username", "Groucho");// fileInputElement中已經包含了用戶所選擇的文件fd.append("userfile", fileInputElement.files[0]);(2) var formData = new FormData(form); //內部form值需要時js原生對象

?

針對formdata需要注意兩點: 1 想要查看FormData對象內部的值時 需要使用方法entries()(對于ie8及以下存在兼容性問題 解決方法詳見https://segmentfault.com/q/1010000007439070?_ea=1345861) ; 2 form表單元素想要傳遞文件需要加入Multipart/form-data var i = formData.entries();i.next(); i.next(); //或者下面是等效的for(var item of formData.entries()){console.log(item[0]+','+item[1]);}
利用formdata進行圖片文件上傳時 ,當圖片文件 為空時 ,會傳入一個文件流,后臺可能沒有辦法判斷該數據是否為空,這就需要前端驗證空參數時不傳對應值
可以利用formdata一項一項添加來修改上面的小bug var fd = new FormData();var postTitleVal = $('#titleId').val();var imgfileVal = $('#imgfile')[0].files;var postContentVal = $('#body_text').val();fd.append("postTitle",postTitleVal);
//注意下面的添加圖片,當為多個時,一定要一個一個進行添加,否則不會正確的傳值,如下面的圖片所示for(var i = 0;
i < imgfileVal.length;i++){fd.append("imgfile",imgfileVal[i]);}fd.append("postContent",postContentVal);return fd;

當多圖片時不進行一個一個添加時會顯示下面的結果,傳給后臺的是一個不能識別的object

------WebKitFormBoundarye3BrkT7fRq8QF9FFContent-Disposition: form-data; name="imgfile"[object FileList]當直接用var fd = new Formdate()時,有圖片有選擇時如下可以正常的進行傳輸------WebKitFormBoundaryv1LffBUkzjtPjHxQ Content-Disposition: form-data; name="imgfile"; filename="Koala.jpg" Content-Type: image/jpeg ------WebKitFormBoundaryv1LffBUkzjtPjHxQ Content-Disposition: form-data; name="imgfile"; filename="Lighthouse.jpg" Content-Type: image/jpeg當不選圖片時(即空參數),會傳入一個 文件流,后臺可能沒有辦法判斷該數據是否為空,可能會造成頁面圖片顯示空白的bug ------WebKitFormBoundaryABIeO4Mf7StP4CdB Content-Disposition: form-data; name="imgfile"; filename="" Content-Type: application/octet-stream

詳見: https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects https://segmentfault.com/a/1190000006716454#articleHeader11 詳見 ?http://blog.csdn.net/xiaojianpitt/article/details/6856536 form表單元素想要傳遞文件一定注意需要加入Multipart/form-data

?總結:上傳數據格式常用的有:

? ? ? ? 1 請求字符串 name=value&age=3的形式;

   2 json對象形式;

   3 formData對象格式;

當然也可以有其他類型,詳見http://www.cnblogs.com/haitao-fan/p/3908973.html

https://developer.mozilla.org/en-US/docs/Web/API/FormData/entries

轉載于:https://www.cnblogs.com/xhliang/p/7732261.html

總結

以上是生活随笔為你收集整理的easyui form提交和formdata提交记录,查看FormData对象内部的值的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。