使用JavaScript将XML发布到Web服务

Question

I am new with javascript, need help to post data to web service. I have simple page:

        <form action="#" class="simple-form">
            <input id="A" type="text" autocomplete="off">
            <input id="B" type="text" autocomplete="off">
            <input id="amount" type="text" autocomplete="off">
        </form>
        <button align="middle" class="button1" id="create" 
                           onclick="f1()">Create</button>

I need to get values of input A, B and amount, then pass them to url: " http://localhost:8080/dopayment/ " with POST in xml format. The exact xml format must be:

<Payment>
    <a>xxx</a>
    <b>xxx</b>
    <amount>xx</amount>
</Payment>

PS from Postman I have checked above given XML with post to given URL, it is working.

Thanks in advance to everyone.

Answer 1

Since you create the form, put button into it to trigger submit event.

 <form action="#" class="simple-form">
        <input id="A" type="text" autocomplete="off">
        <input id="B" type="text" autocomplete="off">
        <input id="amount" type="text" autocomplete="off">
        <input type="submit" align="middle" class="button1" value="Create">        
 </form>

You can sent info by AJAX, this way:

document.getElementsByClassName("simple-form")[0].addEventListener('submit', (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  const data = `<Payment>
   <a>${formData.get('A')}</a>
   <b>${formData.get('B')}</b>
   <amount>${formData.get('amount')}</amount>
  </Payment>`;

  fetch('http://example.com', {
    method: 'POST', // or 'PUT'
    body: data, // data can be `string` or {object}!
    headers:{
      'Content-Type': 'application/xml'
    }
  }).then(res => res.json())
  .catch(error => console.error('Error:', error))
  .then(response => console.log('Success:', response));
});