Call backend server using javascript-CodePudding

I am building my first application in cordova, using html, css, and javascript. what I am trying to do right now is, on button click, call the local server, and have it log something, just so I know it works. but, even that isn't working. so what I am trying to do is below:

index.html

<body>
    <div >
        <div >
            <h2>Login</h2>
            <form>
              <div >
                <input type="text" name="" required="">
                <label>Username</label>
              </div>
              <div >
                <input type="password" name="" required="">
                <label>Password</label>
              </div>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <button onclick="submitButton()">Submit Function</button>  
            </form>
          </div>
    </div>
    <script src="cordova.js"></script>
    <script src="js/index.js"></script>

and then in my index.js file, I have this:

 function submitButton() {
  const url ='http://localhost:6969/test';
const headers = {
  "Content-Type": "application/json",
}


  fetch(url, { method: 'POST', headers: headers})
  .then((res) => {
     return res.json()
})
}

and in my server:

 app.post('/test', (req, res) => {
    console.log("this is actually pretty cool, if it worked!")
  })

what am I doing wrong? am I missing something on the JS side, or maybe in cordova?

CodePudding user response：

Can you update your fetch API in submitButton to this?

fetch(url, {
  method: 'POST',
  headers: headers,
  // body: JSON.stringify(data), // you can just skip this if all you want is to test the API
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch