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按钮 } ~~~