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

来源:互联网 发布:软件技术服务包括什么 编辑:程序博客网 时间:2024/06/05 04:07

页面有一个输入框,输入框可以动态添加,需求是要拿到所有的输入框的值然后传到后台。

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")@ResponseBodypublic 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;}







阅读全文
0 0
原创粉丝点击