Question

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

我希望以 List EntPropertySub 的类型作为JSON格式POST，这意味着类类型列表，我有一个混乱如何在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>

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

1 个答案: