Ajax POST удалить несколько элементов с одинаковым именем Spring MVC

Question

Я пытаюсь удалить несколько элементов с одинаковым именем в моем веб-приложении. Но он выдает ошибку 500, когда я делаю POST.

Это мой код формы

  <form method="POST" name="deleteFormAdd" id="deleteFormAdd" enctype="multipart/form-data">
              <input type="hidden" name="_csrf" th:value="${_csrf.token}" />

                <!--Asset ID set to hidden so the User can't see it-->
                <input type="hidden" th:each="deleteCategory, itemStat : ${DeleteCategoryObject}" 
                th:name="assetID" 
                th:value="${deleteCategory.assetID}"/>

                <!-- For showing all the Asset to be deleted -->
                <input class="w3-input w3-border w3-round-large" type="text" 
                th:each="deleteCategory, itemStat : ${DeleteCategoryObject}" 
                th:name="${DeleteCategoryObject[__${itemStat.index}__].assetType}" 
                th:value="${deleteCategory.assetType}" 
                disabled="disabled"/>  

                <br></br>
                <input type="button"  class="btn btn-primary btn-block" value="Yes" th:onclick="'javascript:submitForm(\'deleteFormAdd\',\''+@{/delete-asset}+'\')'" />
                <button type="reset" onclick="window.location.href = 'manage-assets.html';" class="btn btn-default btn-block"> Cancel</button>
              </form>

Форма отправки Ajax

    function submitForm(formID, url){
    var formData = new FormData($("#" + formID)[0]);
    $.ajax({
        dataType: 'json',
        url: url,
        data : formData,
        type : "POST",
        enctype : "multipart/form-data" , 
        processData : false,
        contentType : false,
        success : function(data) {
            if (data.status == 1) {
                openAlertDialog("Success", "The Asset type has been deleted!", "Continue", "manage-assets");
            } else {
                openAlertDialog("Error", data.message, "Continue", "manage-assets");
            }
        },
        error : function(data) {
            openAlertDialog("Error", data.message, "Continue", "manage-assets");
        },
    });
}

Spring Controller

    @RequestMapping(value = "/delete-asset", method = RequestMethod.POST)
public @ResponseBody String deleteAsset(@ModelAttribute List<AssetCategory> assetCategories) {
    JsonObject result = new JsonObject();
    if (assetCategories != null && !assetCategories.isEmpty()) {
        String[] arr = new String[assetCategories.size()];
        for (int i =0; i < assetCategories.size(); i++) {
            arr[i] = assetCategories.get(i).getAssetID();
        }
        assetService.deleteAssets(arr);
        result.addProperty("result", "Success");
        result.addProperty("status", 1);
        result.addProperty("message", "Asset Deleted!");
    }
    return result.toString();
}

Служба Spring

    @Override
public AssetCategory deleteAssets(String[] assetID) {
    return dao.deleteAssets(assetID);
}

Spring DAO

    @Query("Delete From AssetCategory A WHERE A.assetID IN (:assetID)")
public AssetCategory deleteAssets(@Param("assetID") String[] assetID);

Ошибка консоли Spring

Не удалось создать экземпляр [java. util.List]: указанный класс является интерфейсом] с root причиной org.springframework.beans.BeanInstantiationException: не удалось создать экземпляр [java .util.List]: указанный класс является интерфейсом

Это данные формы (они содержат идентификаторы активов)

Answer 1

Вы используете multipart/form-data. Итак, ваш заголовок запроса имеет multipart/form-data Content-Type, который имеет данные в качестве типа формы. например, ключ = значение.

Так что просто удалите аннотацию @ModelAttribute и добавьте consumes свойства к аннотации сопоставления.

//if you're using spring version more than 4.3, use below @PostMapping for readability
//@PostMapping(value = "/delete-asset", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
@RequestMapping(value = "/delete-asset", method = RequestMethod.POST, consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
public @ResponseBody String deleteAsset(List<AssetCategory> assetCategories) {
    JsonObject result = new JsonObject();

    //you can use apache's commons-collection
    if (CollectionUtils.isNotEmpty(assetCategories)) {
        //and you can also use stream api
        String[] arr = assetCategories.stream()
                               .map(AssetCategory::getAssetID)
                               .toArray();
        assetService.deleteAssets(arr);
        result.addProperty("result", "Success");
        result.addProperty("status", 1);
        result.addProperty("message", "Asset Deleted!");
    }
    return result.toString();
}

Answer 2

Кажется, проблема с вашей ajax функцией. Проверьте ниже:

function submitForm(formID, url) {
var assetIdList = [];
var assetIdObj;
$("#" + formID).find('input[name="assetID"]').each(function () {
    assetIdObj = {};
    assetIdObj.assetID = $(this).val();
    assetIdList.push(assetIdObj);
});

$.ajax({
    dataType: 'json',
    url: url,
    data: {assetCategories: assetIdList},
    type: "POST",
    enctype: "multipart/form-data",
    processData: false,
    contentType: false,
    success: function (data) {
        if (data.status === 1) {
            openAlertDialog("Success", "The Asset type has been deleted!", "Continue", "manage-assets");
        } else {
            openAlertDialog("Error", data.message, "Continue", "manage-assets");
        }
    },
    error: function (data) {
        openAlertDialog("Error", data.message, "Continue", "manage-assets");
    },
});
}

Обновить этот html код с:

<input type="hidden" th:each="deleteCategory, itemStat : ${DeleteCategoryObject}" 
            th:name="assetID" 
            th:value="${deleteCategory.assetID}"/>

До этого:

<input type="hidden" th:each="deleteCategory, itemStat : ${DeleteCategoryObject}" 
            name="assetID" 
            th:value="${deleteCategory.assetID}"/>