使用 javascript 调用后端服务器

Question

我正在使用 html、css 和 javascript 在 cordova 中构建我的第一个应用程序。我现在想做的是，点击按钮，调用本地服务器，让它记录一些东西，这样我就知道它有效了。但是，即使这样也行不通。所以我想做的是：

index.html

<body>
    <div class="app">
        <div class="login-box">
            <h2>Login</h2>
            <form>
              <div class="user-box">
                <input type="text" name="" required="">
                <label>Username</label>
              </div>
              <div class="user-box">
                <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>

然后在我的 index.js 文件中，我有这个：

 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()
})
}

在我的服务器中：

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

我做错了什么？我是不是在 JS 方面遗漏了什么，或者在 cordova 中遗漏了什么？

Answer 1

你可以将 submitButton 中的 fetch API 更新为这个吗？

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

使用 javascript 调用后端服务器

Call backend server using javascript

html

javascript

node.js

cordova

cordova-plugins