javascript - 如何使用 jQuery 创建数组列表的对象

Question

我的项目基于 spring boot、Thymeleaf、mysql、html 和 jQuery。我的场景正在获取动态生成的输入框数据和需要执行的静态输入框数据并点击@controller。

我想以 List EntPropertySub 类型的 JSON 格式发布，这意味着 类类型列表，我很困惑如何在 jQuery 中制作列表.我试图制作一个对象数组，但似乎出错了。请指导我。这是示例代码

var max;
var blockname;
var floors;
var flatstart;
var flatend;
var blockListPropSub[];
for(max=1;max<=x;max++) {
  blockListPropSub[max] = {
    blockname = $('#block'+max).val();
    floors=$('#floor'+max).val();
    flatstart=$('#flats'+max).val();
    flatend=$('#flatsend'+max).val();
  };
}

这是一个完整的脚本..

$(document).ready(function() {

var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $("#addingInp"); //Fields wrapper
var add_button      = $("#addButton"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment now x=1 after x++ x=2,so next code 2%2==0 is true

        $(wrapper).append('<div style="margin-top: 20px" class="form-row">'
                +'<div class"form-group col-md-3">'
                +'<label for="block'+x+'">Block</label>'
                +'<input id="block'+x+'" th:field="*{blockListPropSub.blockname}" type="text" name="mytext[]" class="form-control block" placeholder="Enter Name"/>'
                +'</div>'

                +'<div class"form-group col-md-4">'
                +'<label for="floor'+x+'">No of floors</label>'
                +'<input id="floor'+x+'" th:field="*{blockListPropSub.floors}" type="text" name="mytext[]" class="form-control floor" placeholder="Start (Ex : 1)"/>'
                +'</div>'

                +'<div class"form-group col-md-4">'
                +'<label for="flats'+x+'">No/Name of flats</label>'
                +'<input id="flats'+x+'" th:field="*{blockListPropSub.flatstart}" type="text" name="mytext[]" class="form-control flatstart" placeholder="Start (Ex : A or 1)"/>'
                +'<input id="flatsend'+x+'" th:field="*{blockListPropSub.flatend}" type="text" name="mytext[]" class="form-control flatend" placeholder="End (Ex : Z or 100)"/>'
                +'</div>'

                    +'<a href="#" class="remove_field col-md-1"> X </a>'
                +'</div>'); //add input box
    }
});

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
 //--------------------For Submitting` data to controller
    var url = window.location;
    // SUBMIT FORM
    $("#socityreg").submit(function(event) {
        // Prevent the form from submitting via the browser.
        event.preventDefault();
        ajxPost();
    });

function ajxPost(){

    var max;
    var blockname;
    var floors;
    var flatstart;
    var flatend;
    var blockListPropSub[];
    for(max=1;max<=x;max++)
        {
        blockListPropSub[max]={
            blockname = $('#block'+max).val();
            floors=$('#floor'+max).val();
            flatstart=$('#flats'+max).val();
            flatend=$('#flatsend'+max).val();
                };
        }

    alert(blockListPropSub.blockname[1]);
    // PREPARE FORM DATA
    var formData = {
            property_name : $("#propertyname").val(),
            address1 : $("#inputaddress").val(),
            address2 : $("#inputaddress2").val(),
            city:$("#inputcity").val(),
            state:$("#inputstate").val(),
            country:$("#inputcountry").val(),
            zipcode:$("#inputzip").val(),
            blockListPropSub
    }

    // DO POST
    $.ajax({
        type : "POST",
        contentType : "application/json",
        url : url+"/savemasterproperty",
        data :JSON.stringify(formData),
        dataType : 'json',
        success : function(result) {
            if(result == "saved"){
                $("#resultid").html("<strong>" +username+ " Registered Successfully!" );
            }else{
                $("#resultid").html("<strong>Error</strong>");
            }

            alert(result.status);
            console.log(result);
        },
        error : function(e) {
            alert("Error!");
            alert(url);
            console.log("ERROR: ", e);
        }
    });
    // Reset FormData after Posting
        //resetData();


 } 
   /* function resetData(){
        property_name : $("").val(),
        address1 : $("").val(),
address2 : $("").val(),
        city:$("").val(),
        state:$("").val(),
        country:$("").val(),
        zipcode:$("").val(),
    }*/
    });

Answer 1

首先，你必须让 BlockListPropSub 成为一个数组，var blockListPropSub = []

然后使用类似blockname: $('#block' + max).val() 的东西来设置blockname

var max;
var blockname;
var floors;
var flatstart;
var flatend;
var blockListPropSub = [];
for (max = 1; max <= 2; max++) {
  blockListPropSub.push({
    blockname: max, //$('#block' + max).val();
    floors: max, //$('#floor' + max).val();
    flatstart: max, //$('#flats' + max).val();
    flatend: max, //$('#flatsend' + max).val();
  })
}
console.log(blockListPropSub)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>