Question

我正在使用Bootstrap / javascript作为前端开发一个简单的网页，我想做的是发送一个HTTP POST到达后端（我使用Spring作为后端），但收到了400错误请求。< / p>

我有以下脚本和HTML，我正在尝试将表单ID传递给下面的函数以执行HTTP POST。

//标签上的脚本函数sendData（data）{

'hello'

//表单HTML代码

      alert('Data' + data);
      var XHR = new XMLHttpRequest();
      var urlEncodedData = "";
      var urlEncodedDataPairs = [];
      var name;

      // Turn the data object into an array of URL-encoded key/value pairs.
      for(name in data) {
        urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
      }

      // Combine the pairs into a single string and replace all %-encoded spaces to 
      // the '+' character; matches the behaviour of browser form submissions.
      urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');

      // Define what happens on successful data submission
      XHR.addEventListener('load', function(event) {
        event.preventDefault();
        alert('Yeah! Data sent and response loaded.');
      });

      // Define what happens in case of error
      XHR.addEventListener('error', function(event) {
        alert('Oops! Something goes wrong.');
      });

      // Set up our request
      XHR.open('POST', 'http://localhost:8080/api/novoCondomino');

      // Add the required HTTP header for form data POST requests
      XHR.setRequestHeader('Content-Type', 'application/json');

      // Finally, send our data.
      alert('urlEncodedData' + urlEncodedData);
      XHR.send(urlEncodedData);
    }

    </script>

当我点击按钮提交表格时，我收到400错误的请求错误消息。我知道这是错误的，因为似乎我正在将HTMLDocumentElement作为有效载荷而不是JSON对象发送。我找到了一些没有Javascript的解决方案，但事实证明我的后端不接受application / x-www-form-urlencoded，因此我想将内容类型设置为application / json。将JSON对象作为数据传递时使用POSTMAN时，POST可以正常工作。

如何使用Javascript解决方案修复代码，以完全按照后端的期望从表单发送数据（如下所示的DTO类）

后端期望

// DTO类公共类UserCommand {

<FORM NAME="myform" id="inputform" onSubmit="JavaScript:sendData(inputform)">
     <div class="form-row">

    <div class="form-group col-md-12">
        <label for="inputAddress">Nome</label>
        <input type="text" class="form-control" id="condomino" placeholder="Nome">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress2">Apartamento</label>
    <input type="text" class="form-control" id="apto" placeholder="Apto">

  </div>
  <div class="form-group">
      <label for="inputPassword4">Senha</label>
      <input type="password" class="form-control" id="password" placeholder="Password">
  </div>
  <div class="form-row">
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <input type="submit" value="Send "class="btn btn-primary">Sign in</button>
</form>

//后端的控制器

    public UserCommand() {

    }

    private int apartament;
    private String name;
    private String password;

谢谢。

Answer 1

你说

使用POSTMAN时POST工作正常

您是说您正在Postman中使用JSON正文并且它正在运行吗？

如果是这样，解决方案将是确保在调用XHR.send()时使用正确格式的JSON。

记录您传递给XHR.send()的内容，并使用邮递员将其发布，如果您在那里获得400，则可以肯定知道。如果我误解了任何事情，请告诉我。

使用Javascript的POST表格

1 个答案: