js如何把数据发到服务器

要将数据发送到服务器，可以使用JavaScript中的XMLHttpRequest对象或Fetch API来进行操作。

使用XMLHttpRequest对象的示例代码如下：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

// 设置请求方法和URL
xhr.open('POST', 'http://example.com/submit', true);

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');

// 监听请求状态变化事件
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求成功
        console.log(xhr.responseText);
    }
};

// 发送数据
var data = {
    name: 'John',
    age: 25
};
xhr.send(JSON.stringify(data));

使用Fetch API的示例代码如下：

// 发送数据
var data = {
    name: 'John',
    age: 25
};

fetch('http://example.com/submit', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
    // 请求成功
    console.log(data);
})
.catch(error => {
    // 请求失败
    console.error(error);
});

以上示例代码中，我们首先创建了一个XMLHttpRequest对象或者使用Fetch API发起了一个POST请求。然后，我们设置请求头，指定请求数据的格式为JSON。接下来发送数据，通过JSON.stringify()将JavaScript对象转换为JSON格式字符串。

最后，我们可以通过监听XMLHttpRequest对象的onreadystatechange事件或使用Fetch API的.then()方法来处理服务器的响应。

通过以上的代码示例，就可以将数据发送到服务器。

在 JavaScript 中，我们可以使用多种方法将数据发送到服务器。以下是其中一些常见的方法：

1. 使用 XMLHttpRequest 对象：XMLHttpRequest 对象是 JavaScript 中的核心对象之一，可以用于与服务器进行数据交互。我们可以使用该对象创建一个 HTTP 请求，并发送数据到服务器。以下是一个使用 XMLHttpRequest 对象发送数据的示例代码：

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://example.com/api", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
var data = {
    name: "John",
    age: 25
};
xhr.send(JSON.stringify(data));

2. 使用 Fetch API：Fetch API 是一个比 XMLHttpRequest 更现代的方法，可以使用它发送数据到服务器。与 XMLHttpRequest 相比，Fetch API 更简洁且易于使用。以下是使用 Fetch API 发送数据的示例代码：

var data = {
    name: "John",
    age: 25
};
fetch("http://example.com/api", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
})
.then(function(response) {
    return response.text();
})
.then(function(data) {
    console.log(data);
})
.catch(function(error) {
    console.log(error);
});

3. 使用 jQuery 的 Ajax 方法：如果你正在使用 jQuery 库，那么可以使用它提供的 Ajax 方法来发送数据到服务器。以下是一个使用 jQuery 的 Ajax 方法发送数据的示例代码：

var data = {
    name: "John",
    age: 25
};
$.ajax({
    url: "http://example.com/api",
    type: "POST",
    contentType: "application/json",
    data: JSON.stringify(data),
    success: function(response) {
        console.log(response);
    },
    error: function(error) {
        console.log(error);
    }
});

4. 使用 WebSocket：如果你需要实时地发送数据到服务器，可以使用 WebSocket 技术。WebSocket 是一种在客户端和服务器之间进行双向通信的协议。以下是一个使用 WebSocket 发送数据的示例代码：

var socket = new WebSocket("ws://example.com");
socket.onopen = function() {
    var data = {
        name: "John",
        age: 25
    };
    socket.send(JSON.stringify(data));
};
socket.onmessage = function(event) {
    console.log(event.data);
};
socket.onclose = function() {
    console.log("Connection closed");
};

5. 使用表单提交：如果你有一个包含表单的 HTML 页面，可以使用表单的提交功能将数据发送到服务器。以下是一个使用表单提交数据的示例代码：

<form action="http://example.com/api" method="POST" enctype="multipart/form-data">
    <input type="text" name="name" value="John">
    <input type="text" name="age" value="25">
    <input type="submit" value="Submit">
</form>

请注意，上述代码只是示例代码，具体实现需根据自己的具体项目需求进行相应调整。此外，还需要注意跨域请求和安全性问题，并根据需要适当配置请求头和服务器端的验证和权限控制。

要把数据发送到服务器，我们可以使用JavaScript中的XMLHttpRequest对象或fetch函数。这两种方法都可以发送HTTP请求，并将数据发送到服务器。

方法一：使用XMLHttpRequest对象

步骤一：创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

步骤二：设置请求方法和URL

xhr.open('POST', 'http://example.com/api', true); // 第三个参数表示请求是否是异步的

步骤三：设置请求头

xhr.setRequestHeader('Content-Type', 'application/json');
// 如果发送的是JSON数据，可以设置Content-Type为application/json；如果发送的是表单数据，可以设置Content-Type为application/x-www-form-urlencoded

步骤四：设置响应类型（如果需要）

xhr.responseType = 'json'; // 可以设置为'json'、'text'等

步骤五：监听状态变化

xhr.onreadystatechange = function() {
  if(xhr.readyState === XMLHttpRequest.DONE) {
    if(xhr.status === 200) {
      console.log(xhr.response); // 请求成功后的处理逻辑
    } else {
      console.error('请求失败: ' + xhr.status);
    }
  }
}

步骤六：发送请求

var data = {name: 'John', age: 20};
xhr.send(JSON.stringify(data));
// 如果发送的是JSON数据，需要将数据转为JSON字符串；如果发送的是表单数据，可以直接传递FormData对象

方法二：使用fetch函数

步骤一：调用fetch函数

var url = 'http://example.com/api';
var data = {name: 'John', age: 20};
fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
.then(function(response) {
  if(response.ok) {
    return response.json();
  } else {
    throw new Error('请求失败: ' + response.status);
  }
})
.then(function(data) {
  console.log(data); // 请求成功后的处理逻辑
})
.catch(function(error) {
  console.error(error);
});

使用fetch函数时，可以通过第二个参数传递请求的一些设置，例如请求方法(method)、请求头(headers)、请求体(body)等。并且fetch函数返回一个Promise对象，可以链式调用各种处理函数。

以上就是使用JavaScript将数据发送到服务器的两种方法。可以根据具体需求选择使用XMLHttpRequest对象或fetch函数进行实现。