您的位置:首页 > Web前端 > JQuery

jquery通过name获取到所有的value并且构造一个数据传到后台

2017-06-13 20:15 721 查看
页面有一个输入框,输入框可以动态添加,需求是要拿到所有的输入框的值然后传到后台。

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="#" class="removeclass">删除</a></div>
</div>

2.用js动态的生成输入框:

<script>
$(document).ready(function() {
var MaxInputs       = 8; //maximum input boxes allowed
var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton       = $("#AddMoreFileBox"); //Add button ID
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>

3.获取所有的输入框的值

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;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: