今天在作與後臺交互的的過程當中,發現php對於接收的POST有一個限制,超出1000個字段以後便沒法接收,項目要求在不改變PHP配置的狀況下經過前端方式解決,經過分析而且網上差一些大牛的資料終於找到了解決方案,下面進行介紹:php
首先,因爲post的數據太多會致使PHP沒法接收,那麼解決思路就是將form表單中要進行提交的數據封裝爲一個json字段提交到後臺,爲了其餘表單也會出現這樣的問題,則將該方法封裝爲jQuery擴展的一個方法:css
1 // submitButtonId 提交按鈕id,formID表單id,formUrl表單提交url, 2 setSerializeForm: function(submitButtonId, formID, formUrl, callback, clickFn) 3 { 4 if($.isFunction(clickFn)) 5 { 6 clickFn(); 7 } 8 9 var $submitButton = $(submitButtonId); 10 $(document).on('click', submitButtonId, function(event) { 11 $submitButton.val(v.submitting); 12 $submitButton.attr('disabled', true); 13 14 // serializeArray() 方法經過序列化表單值來建立對象數組 15 // JSON.stringify 將任意的 JavaScript 值序列化成 JSON 字符串 16 var jsonData = $(formID).serializeArray(); 17 var jsonStr = JSON.stringify(jsonData); 18 19 $.post(formUrl, {'jsonStr':jsonStr}, function(response){ 20 if(response.result == 'success'){ 21 $submitButton.popover({trigger:'manual', content:response.message, placement:'right'}).popover('show'); 22 $submitButton.next('.popover').addClass('popover-success'); 23 if(response.locate){ 24 setTimeout(function(){location.href = response.locate}, 1000); 25 } 26 } else { 27 $submitButton.attr('disabled', false); 28 $submitButton.val(v.saveOrder); 29 30 if($.type(response.message) == 'object') 31 { 32 $.each(response.message, function(key, value) 33 { 34 var errorOBJ = '#' + key; 35 var errorLabel = key + 'Label'; 36 37 if (typeof value == 'string' || Object.prototype.toString.call(value).indexOf('Array')>0) 38 { 39 var errorContent = $.type(value) == 'string' ? value : value.join(';'); 40 var errorMSG = '<span id="' + errorLabel + '" for="' + key + '" class="text-error red">'; 41 errorMSG += errorContent; 42 errorMSG += '</span>'; 43 } 44 else 45 { 46 var errorContent = ''; 47 for (var error in value) 48 { 49 errorContent += value[error]; 50 errorContent += ';' 51 } 52 errorContent.replace('。','') 53 var errorMSG = '<tr id='+ errorLabel + '><td colspan=13><span for="' + key + '" class="text-error red">'; 54 errorMSG += errorContent; 55 errorMSG += '</span></td></tr>'; 56 } 57 58 $('#' + errorLabel).remove(); 59 60 var $errorOBJ = $(errorOBJ); 61 if($errorOBJ.closest('.input-group').length > 0) 62 { 63 $errorOBJ.closest('.input-group').after(errorMSG) 64 } 65 else if(Object.prototype.toString.call(value).indexOf('Object')>0) 66 { 67 $errorOBJ.after(errorMSG); 68 } 69 else 70 { 71 $errorOBJ.parent().append(errorMSG); 72 } 73 $errorOBJ.css('margin-bottom', 0); 74 $errorOBJ.css('border-color','#953B39'); 75 if($errorOBJ[0].id.indexOf('products') >= 0) 76 { 77 var index = parseInt($errorOBJ.index("tr[id *= 'products']")) - errorLabelTotal; 78 errorLabelTotal++; 79 var $actionItem = $('.actionList-item:eq('+index+')'); 80 $actionItem.css('margin-bottom','28px'); 81 } 82 83 $(errorOBJ).change(function() 84 { 85 $('#' + errorLabel).remove(); 86 }); 87 }); 88 } else { 89 $submitButton.popover({trigger:'manual', content:response.message, placement:'right'}).popover('show'); 90 $submitButton.next('.popover').addClass('popover-danger'); 91 function destroy(){$submitButton.popover('destroy')} 92 setTimeout(destroy,3000); 93 } 94 } 95 if($.isFunction(callback)) return callback(response); 96 }, 'json'); 97 }); 98 }
在調用該方法時只須要經過如下方式:前端
1 $.setSerializeForm('#submitOrder', '#orderAjaxForm', v.formUrl);