jQuery使用post方法提交数据实例

当我们需要将数据传输到服务器端，一种常用的方法是使用AJAX。jQuery提供了很多AJAX方法来实现数据的传输，其中就包含了$.post()方法。该方法可以向指定的url发送POST请求，并以json格式传递数据。本文将详细讲解如何使用$.post()方法提交数据以及两个实例的说明。

准备工作

在使用$.post()方法前需要在HTML文件中引入jQuery库文件：

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.6.0/jquery.js"></script>

示例一：向服务器发送数据

本示例用于向服务器发送数据，需要创建一个接口用于接收数据。在HTML文件中添加以下代码：

<div>
  <input type="text" id="username" placeholder="请输入用户名">
  <input type="text" id="age" placeholder="请输入年龄">
  <button id="submitBtn">提交</button>
</div>

<script type="text/javascript">
  $('#submitBtn').click(function () {
    const username = $('#username').val();
    const age = $('#age').val();
    const data = {
      username,
      age
    };
    $.post('/api/user', data, function (response) {
      console.log(response);
    });
  });
</script>

以上代码使用jQuery选择器获取了两个输入框中的数据，将其组成一个json对象data，然后使用$.post()方法将数据发送到服务器端的/api/user接口。当服务器响应后会将响应结果打印到浏览器控制台中。

在服务器端中创建/api/user接口以接收传输的数据，如下所示：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const jsonParser = bodyParser.json();

app.post('/api/user', jsonParser, function (req, res) {
  const username = req.body.username;
  const age = req.body.age;
  console.log(`username: ${username}, age: ${age}`);
  res.send('请求已接收');
});

app.listen(3000, function () {
  console.log('服务器已启动，端口号：3000');
});

以上代码中需要引入express和body-parser两个库，用于创建服务器和解析POST请求中的数据。其中jsonParser是一个中间件，用于解析POST请求发送的json格式数据。

示例二：接收服务器响应

本示例用于接收服务器响应，需要在服务器端创建一个返回json格式的接口。在HTML文件中添加以下代码：

<div>
  <input type="text" id="username" placeholder="请输入用户名">
  <input type="text" id="password" placeholder="请输入密码">
  <button id="loginBtn">登录</button>
</div>

<script type="text/javascript">
  $('#loginBtn').click(function () {
    const username = $('#username').val();
    const password = $('#password').val();
    const data = {
      username,
      password
    };
    $.post('/api/login', data, function (response) {
      console.log(response);
      if (response.status === 'success') {
        alert('登录成功');
      } else {
        alert('登录失败');
      }
    });
  });
</script>

以上代码使用jQuery选择器获取两个输入框中的数据，将其组成一个json对象data，然后使用$.post()方法向服务器端的/api/login接口发送POST请求。当服务器响应后会将响应结果打印到浏览器控制台中，并根据响应结果在页面中弹出相应的提示框。

在服务器端中创建/api/login接口，返回json格式的响应结果，如下所示：

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const jsonParser = bodyParser.json();

app.post('/api/login', jsonParser, function (req, res) {
  const username = req.body.username;
  const password = req.body.password;
  if (username === 'admin' && password === '123456') {
    res.send({
      status: 'success',
      message: '登录成功'
    });
  } else {
    res.send({
      status: 'error',
      message: '用户名或密码错误'
    });
  }
});

app.listen(3000, function () {
  console.log('服务器已启动，端口号：3000');
});

以上代码中使用if...else...来判断用户名和密码是否正确，根据判断结果返回json格式的响应结果。

以上两个示例均使用$.post()方法向服务器发送POST请求并接收服务器响应。需要注意的是，$.post()中可以传递第三个参数callback，该参数用于处理服务器响应结果。callback可接收三个参数：服务器返回的数据、状态描述和XMLHttpRequest对象。值得注意的是，该方法只能提交application/x-www-form-urlencoded和multipart/form-data数据格式。如果需要提交json格式的数据，则需要通过JSON.stringify()方法将数据转换为字符串格式。