Question

我需要使用ajax发送一些数据，首先我用表单获取这些数据，然后形成我需要json进行ajax请求的数据。我需要此json对象进行请求：

          {
            "productId": 0,
            "number": "30-E-5",
            "amount": 6.09,
            "primeCost": 11.4,
            "manufacturer": 'HonBar',
            "productTypeId": 1,
            "parameters": [
                {
                    "parameterId": 2,
                    "value": "XXX"
                },
                {
                    "parameterId": 3,
                    "value": "CK45"
                },
                {
                    "parameterId": 4,
                    "value": "30"
                }
            ]
          }

我从表单中获取数据，然后通过form.append（）方法为json添加缺少的属性。结果，缺少的属性不会添加到“表单”中。我的html表单和发布请求：

document.getElementById('dataForm').addEventListener('submit', function (ev) {
    let form = new FormData(document.getElementById('dataForm'));
    form.append("productId", 0);
    form.append("parameters"[0]['parameterId'], 2);
    form.append("parameters"[1]['parameterId'], 3);
    form.append("parameters"[2]['parameterId'], 4);
    
    console.log(json);
      fetch( "api/Products/AddProducts", {
            method: 'POST',
          headers: {
              Accept: 'application/json',
              'Content-Type': 'application/json',
          },
          body: JSON.stringify(form)
          })
          .then(res => res.json())
          .then(response => console.log('Success:', JSON.stringify(response)))
            .catch((error) => {
                console.error(error);
            });

        ev.preventDefault();
    });

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
<div class="container-fluid represent-product">
        <div class="row">
            <form id="dataForm" method="post">
                <div class="row p-2">
                    <div class="col-2 form-group">
                        <label>Name type</label>
                        <select name="productTypeId" class="form-control" id="TypeProduct">
                            <option value="1">AAAA</option>
                            <option value="2">BBBB</option>
                        </select>
                    </div>
                    <div class="col">
                        <label>number</label>
                        <input name="number" class="form-control" value=""  />
                    </div>
                    <div class="col">
                        <label>diameter</label>
                        <input name="parameters[2].value" class="form-control" value=""  />
                    </div>

                    <div class="col">
                        <label>manufacturer</label>
                        <input name="manufacturer" class="form-control" value=""  />
                    </div>
                    <div class="col">
                        <label>Type</label>
                        <input name="parameters[0].value" class="form-control" />
                    </div>
                    <div class="col">
                        <label>Grade steel</label>
                        <input name="parameters[1].value" class="form-control" />
                    </div>
                    <div class="col">
                        <label>primeCost</label>
                        <input name="primeCost" class="form-control" />
                    </div>
                    <div class="col">
                        <label>amount</label>
                        <input name="amount" class="form-control" />
                    </div>
                    <div class="col justify-content-center btn-add">
                        <button type="submit" class="btn btn-primary  button-add">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
   </body>
</html>

结果是我收到错误消息：“ SyntaxError：意外的令牌<在JSON中的位置0”

如何通过FormData（）为JavaScript ajax请求形成具有嵌套属性的json？

0 个答案: