Javascript 在Html表单中输入的数据不会通过使用Ajax请求使用@Modelattribute转发到modal

我正在尝试制作一个表单，用户可以在其中添加带有图像的产品。我正在使用SpringMVC。问题是，当我在HTML表单中输入数据时，该表单是使用Javascript生成的，并尝试使用Ajax发送数据。productDTO变量中的控制器没有接收到数据。我得到的是空的。我正在为此使用

@ModalAttribute

注释，但它不起作用。我做错了什么

控制器

@ResponseBody
    @RequestMapping(path="/saveProduct", method = RequestMethod.POST )
    public APIResponseModel saveProduct(@ModelAttribute ProductDTO productDto, HttpSession session) {
        APIResponseModel apiResponseModel = new Utils().getDefaultApiResponse();
        UserModel user =  (UserModel) session.getAttribute("loggedInUser");
        BindingResult errorList = new DataBinder(new Object()).getBindingResult();
        logger.info("------------------------------------Logged In user info----------------------------------------------------");
        logger.info(user);
        logger.info("--"+productDto);
        logger.info("----------------------------------------------------------------------------------------");

        if(productDto != null && productDto.getBrand() != null) {
            productServ = new ProductServiceImpl();
            productServ.SaveProduct(productDto, user, null, errorList);
            if(!errorList.hasErrors()) {
                apiResponseModel.setStatus(HttpStatus.OK);
                apiResponseModel.setData(productDto.toString());
                apiResponseModel.setMessage("Product Saved Successfully !!");
            }else {
                errorList.addError(new ObjectError("error", "Please fill the mandatory fields"));
                apiResponseModel.setMessage("Please fill the mandatory fields");
            }
        }else {
            errorList.addError(new ObjectError("error", "Please fill the mandatory fields"));
            apiResponseModel.setMessage("Please fill the mandatory fields");
        }
        logger.info(apiResponseModel);
        return apiResponseModel;
    }

产品DTO在控制器中的应用

package com.Indoera.DTO;

import java.util.List;
import org.springframework.web.multipart.MultipartFile;

import com.Indoera.Modal.UserModel;

public class ProductDTO {

    private Integer id;
    private Integer type;
    private Integer gender;
    private Integer quantity;
    private String brand;
    private Double price;
    private String description;
    private Integer market;
    private MultipartFile mainPic;
    private List<MultipartFile> additionalImages;
    
    
    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public Integer getType() {
        return type;
    }
    public void setType(Integer type) {
        this.type = type;
    }
    public Integer getGender() {
        return gender;
    }
    public void setGender(Integer gender) {
        this.gender = gender;
    }
    public Integer getQuantity() {
        return quantity;
    }
    public void setQuantity(Integer quantity) {
        this.quantity = quantity;
    }
    public MultipartFile getMainPic() {
        return mainPic;
    }
    public void setMainPic(MultipartFile mainPic) {
        this.mainPic = mainPic;
    }
    public String getBrand() {
        return brand;
    }
    public void setBrand(String brand) {
        this.brand = brand;
    }
    public Double getPrice() {
        return price;
    }
    public void setPrice(Double price) {
        this.price = price;
    }
    public String getDescription() {
        return description;
    }
    public void setDescription(String description) {
        this.description = description;
    }
    public Integer getMarket() {
        return market;
    }
    public void setMarket(Integer market) {
        this.market = market;
    }
    public List<MultipartFile> getAdditionalImages() {
        return additionalImages;
    }
    public void setAdditionalImages(List<MultipartFile> additionalImages) {
        this.additionalImages = additionalImages;
    }
    
    @Override
    public String toString() {
        return "{\"id\":\"" + id + "\", \"type\":\"" + type + "\", \"gender\":\"" + gender + "\", \"quantity\":\""
                + quantity + "\", \"brand\":\"" + brand + "\", \"price\":\"" + price + "\", \"description\":\""
                + description + "\", \"market\":\"" + market + "\", \"mainPic\":\"" + mainPic
                + "\", \"additionalImages\":\"" + additionalImages + "\"}";
    }
}

function addProductForm(){
    htmlForm ="";
    htmlForm += "<div class=\"main-div\">"
    +"<form>"
    +"<input class=\"form-control\" id=\"brand\" type=\"text\"  placeholder=\"Brand name\">"
        +"<div class=\"form-group col-md-4\">"
                        +"<label for=\"inputGender\">Gender</label> <select id=\"gender\" class=\"form-control\" required>"
                        +"<option selected value=\"0\">Male</option>"
                        +"<option value=\"1\">Female</option>"
                        +"<option value=\"2\">Others</option>"
                        +"</select>"
                    +"</div>"
    +"<input class=\"form-control\" id=\"price\" type=\"number\"  placeholder=\"Price\">"
    +"<input class=\"form-control\" id=\"quantity\" type=\"number\"  placeholder=\"Quantity\">"

        +"<div class=\"form-group col-md-4\">"
                        +"<label for=\"input\">Cloth Type</label> <select id=\"type\" class=\"form-control\" required>"
                        +"<option selected value=\"0\">JEANS</option>"
                        +"<option value=\"1\">TOP</option>"
                        +"<option value=\"2\">SHOES</option>"
                        +"<option value=\"3\">SHIRTS</option>"
                        +"<option value=\"4\">SLIPPERS</option>"
                        +"<option value=\"5\">JACKETS</option>"
                        +"<option value=\"6\">SWEATER</option>"
                        +"<option value=\"7\">SWEATSHIRTS</option>"
                        +"</select>"
                    +"</div>"
        
        +"<div class=\"form-group\">"
            +"<label for=\"description\">Decsription</label>"
            +"<textarea class=\"form-control\" id=\"description\" rows=\"3\"></textarea>"
         + "</div>"
    
            +"<div class=\"form-group\">"
           +"<label for=\"mainPic\">Display Picture</label>"
           +" <input type=\"file\" class=\"form-control-file\" id=\"mainPic\">"
          +"</div>"
    
            +"<div class=\"form-group col-md-4\">"
                        +"<label for=\"market\">Market</label> <select id=\"market\" class=\"form-control\" required>"
                        +"<option selected value=\"0\">SAROJANI NAGAR</option>"
                        +"<option value=\"1\">PALIKA</option>"
                        +"<option value=\"2\">RAJPATH</option>"
                        +"</select>"
                    +"</div>"

    +"<button type=\"button\" class=\"btn btn-primary\" onclick=\"saveProductInfo()\">Save Product</button>"
    +"</form>"
    +"</div>";
    
    document.getElementById("storeOwnerContent").innerHTML = htmlForm;
}

function saveProductInfo(){
    let formData = new FormData();
    formData.append("brand", $("#brand").val());
    formData.append("type", $("#type").val());
    formData.append("gender", $("#gender").val());
    formData.append("quantity", $("#quantity").val());
    formData.append("price", $("#price").val());
    formData.append("description", $("#description").val());    
    formData.append("market", $("#market").val());  
    formData.append("mainPic", $("#mainPic").val());    

    var obj = new MasterAjax();
    obj.requestType = "POST";
    obj.url = "saveProduct";
    obj.data = formData;
    console.log("---------------------------")
    for (var pair of formData.entries()) {
        console.log(pair[0]+ ', ' + pair[1]); 
    }
    console.log("---------------------------")
    obj.enctype ="multipart/form-data";   
//  obj.contentType =false;
    obj.requestData(function(responseData){
        console.log(responseData);
        console.log("Response Data ----------------- : "+responseData.status);
        if(responseData.status == "OK"||responseData.status == "ok"){
            alert("success");
        }else{
            alert("Save failed");
        }
    }); 

}

package com.indorea.DTO；
导入java.util.List；
导入org.springframework.web.multipart.MultipartFile；
导入com.indorea.Modal.UserModel；
公共类产品{
私有整数id；
私有整数类型；
私人整数性别；
私有整数数量；
自有品牌；
私人双价；
私有字符串描述；
私人市场；
私有多部分文件mainPic；
私人列表附加图像；
公共整数getId（）{
返回id；
}
公共无效集合id（整数id）{
this.id=id；
}
公共整数getType（）{
返回类型；
}
公共void集合类型（整数类型）{
this.type=type；
}
公共整数getGender（）{
返回性别；
}
公共空间设置性别（整数性别）{
这个。性别=性别；
}
公共整数getQuantity（）{
退货数量；
}
公共无效设置数量（整数数量）{
这个。数量=数量；
}
公共多部分文件getMainPic（）{
返回mainPic；
}
公共void setMainPic（多部分文件mainPic）{
this.mainPic=mainPic；
}
公共字符串getBrand（）{
回归品牌；
}
公共品牌（字符串品牌）{
这个品牌=品牌；
}
公开双价{
退货价格；
}
公共定价（双倍价格）{
这个价格=价格；
}
公共字符串getDescription（）{
返回说明；
}
公共void集合描述（字符串描述）{
this.description=描述；
}
公开市场（）{
回报市场；
}
公共市场（整数市场）{
这个市场=市场；
}
公共列表getAdditionalImages（）{
返回附加图像；
}
public void setAdditionalImages（列出additionalImages）{
this.additionalImages=additionalImages；
}
@凌驾
公共字符串toString（）{
返回“{\'id\”：\”+id+“\”，\“type\”：\“+type+”，\“gender\”：\“+gender+”，\“quantity\”：\”
+数量+“\”，“品牌”：“+品牌+”，“价格”：“+价格+”，“说明”：“
+description+“\”，“market\”：\“+market+”，“mainPic\”：\“+mainPic
+“\”、\“additionalImages\”：\“+additionalImages+”\“}”；
}
}

用于生成表单并向控制器发送数据的代码

package com.Indoera.DTO;

import java.util.List;
import org.springframework.web.multipart.MultipartFile;

import com.Indoera.Modal.UserModel;

public class ProductDTO {

    private Integer id;
    private Integer type;
    private Integer gender;
    private Integer quantity;
    private String brand;
    private Double price;
    private String description;
    private Integer market;
    private MultipartFile mainPic;
    private List<MultipartFile> additionalImages;
    
    
    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public Integer getType() {
        return type;
    }
    public void setType(Integer type) {
        this.type = type;
    }
    public Integer getGender() {
        return gender;
    }
    public void setGender(Integer gender) {
        this.gender = gender;
    }
    public Integer getQuantity() {
        return quantity;
    }
    public void setQuantity(Integer quantity) {
        this.quantity = quantity;
    }
    public MultipartFile getMainPic() {
        return mainPic;
    }
    public void setMainPic(MultipartFile mainPic) {
        this.mainPic = mainPic;
    }
    public String getBrand() {
        return brand;
    }
    public void setBrand(String brand) {
        this.brand = brand;
    }
    public Double getPrice() {
        return price;
    }
    public void setPrice(Double price) {
        this.price = price;
    }
    public String getDescription() {
        return description;
    }
    public void setDescription(String description) {
        this.description = description;
    }
    public Integer getMarket() {
        return market;
    }
    public void setMarket(Integer market) {
        this.market = market;
    }
    public List<MultipartFile> getAdditionalImages() {
        return additionalImages;
    }
    public void setAdditionalImages(List<MultipartFile> additionalImages) {
        this.additionalImages = additionalImages;
    }
    
    @Override
    public String toString() {
        return "{\"id\":\"" + id + "\", \"type\":\"" + type + "\", \"gender\":\"" + gender + "\", \"quantity\":\""
                + quantity + "\", \"brand\":\"" + brand + "\", \"price\":\"" + price + "\", \"description\":\""
                + description + "\", \"market\":\"" + market + "\", \"mainPic\":\"" + mainPic
                + "\", \"additionalImages\":\"" + additionalImages + "\"}";
    }
}

function addProductForm(){
    htmlForm ="";
    htmlForm += "<div class=\"main-div\">"
    +"<form>"
    +"<input class=\"form-control\" id=\"brand\" type=\"text\"  placeholder=\"Brand name\">"
        +"<div class=\"form-group col-md-4\">"
                        +"<label for=\"inputGender\">Gender</label> <select id=\"gender\" class=\"form-control\" required>"
                        +"<option selected value=\"0\">Male</option>"
                        +"<option value=\"1\">Female</option>"
                        +"<option value=\"2\">Others</option>"
                        +"</select>"
                    +"</div>"
    +"<input class=\"form-control\" id=\"price\" type=\"number\"  placeholder=\"Price\">"
    +"<input class=\"form-control\" id=\"quantity\" type=\"number\"  placeholder=\"Quantity\">"

        +"<div class=\"form-group col-md-4\">"
                        +"<label for=\"input\">Cloth Type</label> <select id=\"type\" class=\"form-control\" required>"
                        +"<option selected value=\"0\">JEANS</option>"
                        +"<option value=\"1\">TOP</option>"
                        +"<option value=\"2\">SHOES</option>"
                        +"<option value=\"3\">SHIRTS</option>"
                        +"<option value=\"4\">SLIPPERS</option>"
                        +"<option value=\"5\">JACKETS</option>"
                        +"<option value=\"6\">SWEATER</option>"
                        +"<option value=\"7\">SWEATSHIRTS</option>"
                        +"</select>"
                    +"</div>"
        
        +"<div class=\"form-group\">"
            +"<label for=\"description\">Decsription</label>"
            +"<textarea class=\"form-control\" id=\"description\" rows=\"3\"></textarea>"
         + "</div>"
    
            +"<div class=\"form-group\">"
           +"<label for=\"mainPic\">Display Picture</label>"
           +" <input type=\"file\" class=\"form-control-file\" id=\"mainPic\">"
          +"</div>"
    
            +"<div class=\"form-group col-md-4\">"
                        +"<label for=\"market\">Market</label> <select id=\"market\" class=\"form-control\" required>"
                        +"<option selected value=\"0\">SAROJANI NAGAR</option>"
                        +"<option value=\"1\">PALIKA</option>"
                        +"<option value=\"2\">RAJPATH</option>"
                        +"</select>"
                    +"</div>"

    +"<button type=\"button\" class=\"btn btn-primary\" onclick=\"saveProductInfo()\">Save Product</button>"
    +"</form>"
    +"</div>";
    
    document.getElementById("storeOwnerContent").innerHTML = htmlForm;
}

function saveProductInfo(){
    let formData = new FormData();
    formData.append("brand", $("#brand").val());
    formData.append("type", $("#type").val());
    formData.append("gender", $("#gender").val());
    formData.append("quantity", $("#quantity").val());
    formData.append("price", $("#price").val());
    formData.append("description", $("#description").val());    
    formData.append("market", $("#market").val());  
    formData.append("mainPic", $("#mainPic").val());    

    var obj = new MasterAjax();
    obj.requestType = "POST";
    obj.url = "saveProduct";
    obj.data = formData;
    console.log("---------------------------")
    for (var pair of formData.entries()) {
        console.log(pair[0]+ ', ' + pair[1]); 
    }
    console.log("---------------------------")
    obj.enctype ="multipart/form-data";   
//  obj.contentType =false;
    obj.requestData(function(responseData){
        console.log(responseData);
        console.log("Response Data ----------------- : "+responseData.status);
        if(responseData.status == "OK"||responseData.status == "ok"){
            alert("success");
        }else{
            alert("Save failed");
        }
    }); 

}

函数addProductForm（）{
htmlForm=“”；
htmlForm+=“”
+""
+""
+""
+“性别”
+“男性”
+“女性”
+“其他”
+""
+""
+""
+""
+""
+“布料类型”
+“牛仔裤”
+“顶部”
+“鞋子”
+“衬衫”
+“拖鞋”
+“夹克”
+“毛衣”
+“运动衫”
+""
+""
+""
+“说明”
+""
+ ""
+""
+“显示图片”
+" "
+""
+""
+“市场”
+“SAROJANI NAGAR”
+“帕利卡”
+“RAJPATH”
+""
+""
+“保存产品”
+""
+"";
document.getElementById（“storeOwnerContent”）.innerHTML=htmlForm；
}
函数saveProductInfo（）{
设formData=new formData（）；
formData.append（“brand”，$（“#brand”）.val（）；
append（“type”，$（“#type”）.val（）；
formData.append（“性别”，$（“#性别”）.val（）；
formData.append（“数量”，$（“#数量”）.val（）；
formData.append（“price”，$（“#price”）.val（）；
formData.append（“description”，$（“#description”）.val（）；
formData.append（“market”，$（“#market”）.val（）；
formData.append（“mainPic”，$（“#mainPic”）.val（）；
var obj=new MasterAjax（）；
obj.requestType=“POST”；
obj.url=“saveProduct”；
obj.data=formData；
console.log（“-------------------------------”）
for（formData.entries（）的var对）{
log（对[0]+'，'+对[1]）；
}
console.log（“-------------------------------”）
obj.enctype=“多部分/表单数据”；
//obj.contentType=false；
对象请求数据（功能（响应数据）{
控制台日志（responseData）；
日志（“响应数据----------------:+responseData.status”）；
如果（responseData.status==“OK”| | responseData.status==“OK”）{
警惕（“成功”）；
}否则{
警报（“保存失败”）；
}
}); 
}

Ajax请求中使用的主Ajax类

class MasterAjax{
    constructor(){
        this.requestType = null;
        this.url = null;
        this.timeout = 100000;
        this.enctype =  null;
        this.data = null;
        this.processData = null;
        this.contentType = null;
        this.responseData = null;
        this.responseStatus = null;
        this.responseStatusCode = null;
    }
    
    requestData(callBack){
        
        var parameterError=false;
        if(null == this.requestType){
            parameterError=true;
            console.log("Error: Request Type can't be null");
        }    
        if(null === this.url || undefined === this.url || "undefined" === this.url){
            parameterError=true;
            console.log("Error: URL can't be null");
        }  
        if(null == this.data || this.data.length <= 0){
            console.log("Warning: Data is null");
        }
        if(parameterError === false){
            /*toggleSpinnerOn();  */
            $.ajax({
                type : this.requestType,
                enctype : this.enctype,
                processData : this.processData, 
                contentType : this.contentType, 
                url : global_contextPath+"/"+this.url,
                data: this.data,
                timeout : this.timeout,
                success : function(responseData,textStatus) {
                    /*toggleSpinnerOff();*/
                    callBack(responseData,textStatus);
                },
                error : function(responseData,textStatus) {
                    /*toggleSpinnerOff();  */
                    callBack(responseData,textStatus); 
                }
            }); 
        }
return this.responseData;
    }
    
}

class MasterAjax{
构造函数（）{
this.requestType=null；
this.url=null；
这个超时=100000；
this.enctype=null；
this.data=null；
this.processData=null；
this.contentType=null；
this.responseData=null；
this.responseStatus=null；
this.responseStatusCode=null；
}
请求数据（回调）{
var参数error=false；
if（null==this.requestType）{
参数error=true；