只用html和javascript怎么把用户输入的数据保存到服务端

要将用户输入的数据保存到服务端，仅使用HTML和JavaScript可以通过使用表单以及通过AJAX发送HTTP请求到服务器端来实现。重点在于利用JavaScript中的AJAX技术（异步JavaScript和XML），这样可以在不刷新页面的情况下与服务器进行数据交换和更新。AJAX通过使用XMLHttpRequest对象发送请求到服务器，然后从服务器检索数据并更新页面的部分内容。具体来说，这意味着你需要设计表单用于收集用户的输入，然后编写JavaScript代码来处理表单数据并通过AJAX方法发送到服务器侧。

一、创建HTML表单

一个基础的HTML表单可以用来收集用户的输入数据。它可以包含各种输入字段如文本框、密码框、单选按钮、复选框等，以便从用户那里获取信息。例如：

<form id="userDataForm">
  <label for="username">用户名:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">密码:</label><br>
  <input type="password" id="pwd" name="pwd"><br><br>
  <input type="button" value="提交" onclick="submitData()">
</form>

这个表单包含了用户名和密码输入框，以及一个按钮来提交表单。通过为按钮设置onclick事件，当用户点击按钮时会调用submitData函数。

二、使用AJAX发送数据

AJAX的关键在于可以在不重新加载整个页面的情况下与服务器进行通信。为了将数据从客户端发送到服务器，你需要编写一个JavaScript函数来处理AJAX请求。使用XMLHttpRequest（或现代的fetch API）可以实现这一点。

function submitData() {
  var xhr = new XMLHttpRequest();
  var url = "server_endpoint"; // 替换为你的服务器端点
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
  var data = JSON.stringify({username: document.getElementById("username").value, pwd: document.getElementById("pwd").value});
  xhr.send(data);
}

在这段代码中，首先创建了一个XMLHttpRequest对象，然后调用其open方法来初始化一个新的HTTP请求。这里将方法设置为"POST"表示向服务器端发送数据，然后是服务器的端点地址。setRequestHeader方法用来设置HTTP头部，说明发送的内容类型为JSON。接下来，onreadystatechange方法用于处理服务器响应。如果请求成功完成（状态为200），则可以处理服务器的响应数据。最后，将用户输入的数据转换为JSON字符串并通过send方法发送。

三、服务器端处理

服务端收到AJAX请求后，需要做的是解析请求体中的数据，并据此执行相应的数据保存操作。这通常涉及到更新数据库或文件系统。这部分的实现依赖于你的服务器端技术栈，比如Node.js、Python的Flask或Django、Java的Spring等。以下是使用Node.js示例：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.post('/server_endpoint', function(req, res){
  const userData = req.body; // 获取用户数据
  console.log(userData); // 执行保存操作
  res.send('数据已接收');
});
app.listen(3000, () => {
  console.log('服务器正在运行');
});