使用假的rest api提交表单并发出post请求

如何解决使用假的rest api提交表单并发出post请求

我有一个简单的表格，带有星级评分和评论文本区域，我想获取星级和评论的值，并使用本地安装的 json-server 作为服务器进行发布请求。当评分为 1 或 2 时，它显示带有标题的文本框有什么问题，当评分为 3 和更高时，它显示另一个文本框。

const submitBtn = document.getElementById('submit-btn');
const form = document.getElementById('review-form');
const comment = document.getElementById('comment');
const input = document.querySelectorAll('input[type="radio"]');

form.addEventListener('submit',submitForm);

function submitForm(event) {
  event.preventDefault();

  let inputValue = input.value;
  let commentValue = comment.value;

  fetch('http://localhost:3000/reviews',{
      method: 'POST',body: JSON.stringify({
        rating: '',comment: ''
      }),headers: {
        'Content-type': 'application/json; charset=UTF-8',},})
    .then((response) => response.json())
    .then((data) => console.log(data));
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<form method="POST" id="review-form">
  <div class="star-ratings">
    <input type="radio" name="star-five" id="star-five" value="5">
    <label for="star-five">
      <i class="active fas fa-star star-outline" aria-hidden="true"></i>
    </label>
    <input type="radio" name="star-four" id="star-four" value="4">
    <label for="star-four">
      <i class="active fas fa-star star-outline" aria-hidden="true"></i>
    </label>
    <input type="radio" name="star-three" id="star-three" value="3">
    <label for="star-three">
      <i class="active fas fa-star star-outline" aria-hidden="true"></i>
    </label>
    <input type="radio" name="star-two" id="star-two" value="2">
    <label for="star-two">
      <i class="active fas fa-star star-outline" aria-hidden="true"></i>
    </label>
    <input type="radio" name="star-one" id="star-one" value="1">
    <label for="star-one" id="label">
      <i class="active fas fa-star star-outline" aria-hidden="true"></i>
    </label>
  </div>
  <div class="review-content">
    <div class="review-one">
      <label for="title">What's wrong with it?</label>
      <textarea id="comment" class="comment-one" name="comment-one" rows="5" placeholder="I didn't like the fact that it was..."></textarea>
    </div>
    <div style="display: none;" class="review-two">
      <label for="title">Any highlight you would like to share?</label>
      <textarea class="comment-two" name="comment-two" rows="5" placeholder="Let us kNow your thougths"></textarea>
    </div>
  </div>
  <div>
    <button id="submit-btn" type="submit">Submit</button>
  </div>
</form>

  #review-form {
        width:90%;
        margin: 0 auto;
        .star-ratings {
          direction: rtl;
          display: block;
          text-align: center;
          padding:20px;
          input[type=radio] {
            display: none;
            &:checked {
              ~ {
                label  {
                  color: $color-white;
                }
              }
            }
          }
          label {
            color: #bbb;
            font-size: 32px;
            padding: 0px 8px 10px 0px;
            cursor: pointer;
            transition: all .3s ease-in-out;
            &:hover {
              color: $color-white;
              ~ {
                label {
                  color: $color-white;
                }
              }
            }
          }
        }
        .review-content {
          border-radius:8px;
          background-color: $color-white;
          padding:10px;
          .comment-one {
            border:none;
            resize: none;
            &:focus-visible {
              outline:none;
            }
          }
          .comment-two {
            border:none;
            resize: none;
            &:focus-visible {
              outline:none;
            }
          }
        }
        #submit-btn {
          margin: 73px 0 32px 0;
          padding:24px 66px;
          color: $color-black;
          font-weight: $font-weight-bold;
          font-size:24px;
          background-color: $color-white;
          border-radius: 33px;
          border: $color-border;
          cursor: pointer;
          @media only screen and (min-width: $breakpoint-tablet) {
                margin: 73px auto 32px auto;
                padding:12px 33px;
                font-size:18px;
            }
          &:disabled {
            color: lightgray;
            background-color: #eeeedd;
            // border-color: (rgba(118,118,0.3),rgba(195,195,0.3));
          }
        }
      }