jquery通過name獲取到所有的value並且構造一個數據傳到後臺
阿新 • • 發佈:2019-02-02
頁面有一個輸入框,輸入框可以動態新增,需求是要拿到所有的輸入框的值然後傳到後臺。
1.頁面放一個原始的輸入框
<label class="control-label" id="AddMoreFileBox" for="form-field-1">新增獎品展示名稱</label> <div id="InputsWrapper"> <div><input type="text" name="frontAwardName" id="field_1" value="" placeholder="前端展示獎品文案"/><a href=2.用js動態的生成輸入框:"#" class="removeclass">刪除</a></div> </div>
<script> $(document).ready(function() { var MaxInputs = 8; //maximum input boxes allowed var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID var AddButton = $("#AddMoreFileBox"); //Add button ID3.獲取所有的輸入框的值var x = InputsWrapper.length; //initlal text box count var FieldCount=1; //to keep track of text box added $(AddButton).click(function (e) //on add input button click { if(x <= MaxInputs) //max input box allowed { FieldCount++; //text box added increment //add input box$(InputsWrapper).append('<div><input type="text" name="frontAwardName" id="field_'+ FieldCount +'" placeholder="前端展示獎品文案 "/><a href="#" class="removeclass">刪除</a></div>'); x++; //text box increment } return false; }); $("body").on("click",".removeclass", function(e){ //user click on remove text if( x > 1 ) { $(this).parent('div').remove(); //remove text box x--; //decrement textbox } return false; }) }); </script>
function addNewAward() { var awardName = $("#awardName").val(); var source = $("#source").val(); var entranceID = $("#entranceID").val(); var frontAwardNameArray = new Array(); $("input[name='frontAwardName']").each(function(){ frontAwardNameArray.push($(this).val()); }); if(null != awardName && awardName != '' && null != source && null != entranceID){ $.ajax({ url:"/jingbean-mng/api/addAwardName?source="+source+"&awardName="+encodeURI(encodeURI(awardName))+"&entranceID="+entranceID+"&frontAwardNameArray="+frontAwardNameArray, type:"GET", dataType: "json", contentType: 'application/json;charset=UTF-8', success: function (data) { if(data){ alert("新增獎品名稱成功"); location.href = location.href; }else{ alert("新增獎品名稱失敗"); location.href = location.href; } } }); }else{ alert("請完善資訊後提交"); } }
4.服務端接收:
@RequestMapping("/addAwardName") @ResponseBody public Object addAwardName(String awardName, String source, String entranceID, String [] frontAwardNameArray) { if (StringUtils.isNotBlank(awardName) && StringUtils.isNotBlank(source)) { try { String name = URLDecoder.decode(awardName, "UTF-8"); //bussManageService.addAwardName(name, source); if (StringUtils.isNotBlank(entranceID)) { // bussManageService.addEntranceId(name, entranceID); } } catch (Exception e) { logger.error("addAwardName error:" + e); } } return 1; }