form · PHP筆記

[TOC] ## **表單轉為ajax提交** ``` (function ($) { /* $.xx.xx({}) */ $.extend({ form:{ /* $.form.test({}) */ ajaxpost:function(options,callback){ $.ajax( { url: options.url , type: options.type?options.type:"POST" , data: options.data?options.data:{} , success: function( data, textStatus, jqXHR ){ callback(data, textStatus, jqXHR); } }); }, formData2Json:function(formData){ var objData = {}; //(value, key) => objData[key] = value formData.forEach(function (curValue,index,arr) { objData[index] = curValue; }); //轉json字符串 //return JSON.stringify(objData); //轉json對象. var objDataStr = JSON.stringify(objData) return JSON.parse(objDataStr); } }, }); /* $(xxx).xxx */ $.fn.extend({ formsubmit:function(url,extra_data,form,callback){ extra_data=extra_data??{}; form=form??"form"; //$(xxx)==$(this) return this.each(function(i,e) { // e=$(xxx)[0~n] 為DOM對象 ,注意這里的this和each外的不一樣,這里的是$(xxx)元素集合中再當前循環的其中一個 $(this).on("submit", form, function () { //不知道為什么到這里的data這個變量被覆蓋為undefined var _this = $(this); var formobj=_this[0]; var formData=new FormData(formobj); var formJson=$.form.formData2Json(formData); if ($.isEmptyObject(extra_data)) { var data = formJson; } else { var data = $.extend({}, formJson, extra_data); } $.form.ajaxpost({ url:url, data:data }, function($data, textStatus, jqXHR ){ //這里處理數據,或者價格回調參數 if (callback!=undefined) { callback($data, textStatus, jqXHR ); }else{ //根據數據處理 } }) return false; // 阻止表單默認提交 }); }) } }); })(jQuery); ``` ## **手動提交** ``` $("#goods_form").submit() ``` >[danger]備注：file、image、button、submit、reset都不會被序列化 ## **將表單的轉成數組** ``` var data=$("#goods_form").serializeArray() //還有$(form).formToArray() //它的格式是這樣的 [ { "name": "n1", "value": "1" }, { "name": "n2", "value": "2" }, { "name": "n3", "value": "3" }, { "name": "n4", "value": "4" } ] //轉為json對象 function objectifyForm(formArray) {//serialize data function var returnArray = {}; for (var i = 0; i < formArray.length; i++){ returnArray[formArray[i]['name']] = formArray[i]['value']; } return returnArray; } //或者 function objectifyForm(formArray) {//serialize data function var result = {}; $.each(formArray, function(index, value) { // value.value第二個value代表值 result[value.name] = value.value; }); return returnArray; } //可以將上面的 key/value 的josn對象數據轉為字符串 var str = jQuery.param(data);//可以傳入{} 還可以將json對象轉為url格式字符串 $.param({name:"dash",age:1}); 格式: phone=asdasd&pwd=asdasd&cpwd=asdasd&industry=IT%E3%80%81%E5%8A%9E%E5%85%AC%E8%AE%BE%E5%A4%87&company_name=asdasdasdasd&addr=%E5%8C%97%E4%BA%AC-%E5%8C%97%E4%BA%AC%E5%B8%82-%E4%B8%9C%E5%9F%8E%E5%8C%BA&province_id=1&province=%E5%8C%97%E4%BA%AC&city_id=3216&city=%E5%8C%97%E4%BA%AC%E5%B8%82&prefecture_id=2&prefecture=%E4%B8%9C%E5%9F%8E%E5%8C%BA ``` 當然將表單序列化為字符串不需要下面的方法 ``` var data = $("form").serialize(); 效果和上面一樣的 phone=asdasd&pwd=asdasd&cpwd=asdasd&industry=IT%E3%80%81%E5%8A%9E%E5%85%AC%E8%AE%BE%E5%A4%87&company_name=asdasdasdasd&addr=%E5%8C%97%E4%BA%AC-%E5%8C%97%E4%BA%AC%E5%B8%82-%E4%B8%9C%E5%9F%8E%E5%8C%BA&province_id=1&province=%E5%8C%97%E4%BA%AC&city_id=3216&city=%E5%8C%97%E4%BA%AC%E5%B8%82&prefecture_id=2&prefecture=%E4%B8%9C%E5%9F%8E%E5%8C%BA ``` ## **FormData自定義表單數據new FormData(html對象)** var formdata=new FormData($("#advForm")[0]);//注意參數是html對象而不是jquery對象 >[danger] 存在表單存在disabled屬性時獲取不到值 ``` var phone = $("input[name='phone']"); var imgs = $('.js-upload').get(0).files[0]; var formData = new FormData();//新建一個formData來儲存需要傳遞的信息 formData.append('image', imgs);//需要傳遞的字段image路徑 formData.append('Authorization', "{:session('user.id')}");//id ``` ~~~xml <form id="advForm"> <p>廣告名稱：<input type="text" name="advName" value="xixi"></p> <p>廣告類別：<select name="advType"> <option value="1">輪播圖</option> <option value="2">輪播圖底部廣告</option> <option value="3">熱門回收廣告</option> <option value="4">優品精選廣告</option> </select></p> <p><input type="button" id="btn" value="添加"></p> </form> ~~~ ~~~jsx //獲得表單按鈕元素 var btn=document.querySelector("#btn"); //為按鈕添加點擊事件 btn.onclick=function(){ //根據ID獲得頁面當中的form表單元素 var form=document.querySelector("#advForm"); //將獲得的表單元素作為參數，對formData進行初始化 var formdata=new FormData(form); //通過get方法獲得name為advName元素的value值 console.log(formdata.get("advName"));//xixi //通過get方法獲得name為advType元素的value值 console.log(formdata.get("advType"));//1 } ~~~ >[danger] 注意jquery匹配的的表單的元素前面必須加索引,下面的三個方法都是取第一個匹配的表單 ``` var formobj=document.querySelector(".userform"); console.log(formobj); console.log($(".userform")[0]); console.log($("#uf2")[0]); ``` ## **獲取數據** ~~~csharp // 獲取key為age的第一個值 formdata.get("age"); // 獲取key為age的所有值，返回值為數組類型 formdata.getAll("age"); ~~~ ## **追加數據** >[danger] value 只支持3個類型 bolb string File ~~~go //通過FormData構造函數創建一個空對象 var formdata=new FormData(); //通過append()方法在末尾追加key為name值為laoliu的數據 formdata.append("name","laoliu"); //通過append()方法在末尾追加key為name值為laoli的數據 formdata.append("name","laoli"); //通過append()方法在末尾追加key為name值為laotie的數據 formdata.append("name","laotie"); //通過get方法讀取key為name的第一個值 console.log(formdata.get("name"));//laoliu //通過getAll方法讀取key為name的所有值 console.log(formdata.getAll("name"));//["laoliu", "laoli", "laotie"] ~~~ ## **修改數據** key的值不存在，會添加一條數據 ~~~csharp //通過FormData構造函數創建一個空對象 var formdata=new FormData(); //如果key的值不存在會為數據添加一個key為name值為laoliu的數據 formdata.set("name","laoli"); //通過get方法讀取key為name的第一個值 console.log(formdata.get("name"));//laoli ~~~ ## **通過has(key)來判斷是否存在對應的key值** ~~~jsx //通過FormData構造函數創建一個空對象 var formdata=new FormData(); //通過append()方法在末尾追加key為name值為laoliu的數據 formdata.append("name","laoliu"); //判斷是否包含key為name的數據 console.log(formdata.has("name"));//true //判斷是否包含key為age的數據 console.log(formdata.has("age"));//false ~~~ ## **通過delete(key)可以刪除數據** ~~~cpp //通過FormData構造函數創建一個空對象 var formdata=new FormData(); //通過append()方法在末尾追加key為name值為laoliu的數據 formdata.append("name","laoliu"); console.log(formdata.get("name"));//laoliu //刪除key為name的值 formdata.delete("name"); console.log(formdata.get("name"));//null ~~~ ## **發送數據：** ~~~jsx var btn=document.querySelector("#btn"); btn.onclick=function(){ var formdata=new FormData(document.getElementById("advForm")); var formdata=new FormData($("#advForm")[0]);//注意參數是html對象而不是jquery對象 var xhr=new XMLHttpRequest(); xhr.open("post","http://127.0.0.1/adv"); xhr.send(formdata); xhr.onload=function(){ if(xhr.status==200){ //... } } } ~~~ ## **ajax發送數據** ``` var imgs = $('.js-upload').get(0).files[0]; var formData = new FormData();//新建一個formData來儲存需要傳遞的信息 formData.append('image', imgs);//需要傳遞的字段image路徑 formData.append('Authorization', "{:session('user.id')}");//id $.ajax({ type: 'POST', url: "{:url('Upload/uploadimg')}", // headers: { // 'yl-authorization': obj.mobile // }, data: formData, contentType:false, processData:false,//這個必須 dataType: 'json', success: function (data) { if (data['error']==0) { $('#avatar-file').siblings("img").attr('src',data['message']); $('.avatar').val(data['message']); } }, error: function (err) { } }); ``` jquery-form提交時額外數據 ``` var formData2Json = function(formData){ var objData = {}; //(value, key) => objData[key] = value formData.forEach(function (curValue,index,arr) { objData[index] = curValue; }); //轉json字符串 //return JSON.stringify(objData); //轉json對象. var objDataStr = JSON.stringify(objData) return JSON.parse(objDataStr); } var formData=new FormData(); formData.set("skuparam_value", value ); $("#goods_form").ajaxSubmit({ data:formData2Json(formData), contentType:false, processData:false, success:function (result) { console.log(result); } }); ``` ## **重置表單** ~~~ //方法一 document.getElementById("myform").reset(); //方法二 $('#searchForm')[0].reset(); //方法三使用input按鈕 <input type="reset" name="reset" style="display: none;" /> //方法四如果有默認賦值，需要以下操作雖然reset方法可以做到一部分，但是如果你有個元素是這樣的 <input name="percent" value="50"/> 那么點擊reset只會還原成50 $(':input','#myform').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected'); //方法五如果是ajax提交表單后，刷新表單,在form表單中添加一個隱藏的reset按鈕，? <input type="reset" style="display:none;" />? //然后通過trigger來觸發reset按鈕? function subform(){? 　　/* 提交表單的代碼部分?*/? 　　$("input[type=reset]").trigger("click");//觸發reset按鈕 }? ~~~