如何通过jQuery将HTML事件规划数据提交至数据库？

看起来你已经成功获取到了#editable列表里的事件文本，现在只需要把这些数据发送到后端处理并存入数据库就行啦！我给你两种常用的解决方案：

方案一：用AJAX异步发送数据（推荐，无页面刷新） #

这种方式可以在不刷新页面的情况下把数据发送到后端，用户体验更好。修改你的jQuery代码如下：

$(document).ready(function(){ 
  $('#bang').on("click", function(){ 
    // 先收集所有事件数据到数组里
    let eventData = [];
    $("#editable > li").each(function(){ 
      let eventText = $(this).text().trim(); // 去掉文本前后多余的空格
      eventData.push(eventText);
      console.log(eventText);
    });

    // 用AJAX发送到后端处理页面
    $.ajax({
      url: 'save-events.php', // 替换成你的后端处理页面地址
      type: 'POST',
      data: { events: eventData }, // 把数组作为参数发送
      success: function(response) {
        console.log('数据发送成功！后端返回：', response);
        // 这里可以添加成功后的用户反馈，比如：
        alert('事件已成功保存到数据库！');
      },
      error: function(xhr, status, error) {
        console.error('数据发送失败：', error);
        alert('保存失败，请稍后重试！');
      }
    });
  });
});

后端处理示例（以PHP为例） #

创建一个save-events.php文件，用来接收数据并存入数据库：

<?php
// 1. 连接数据库（替换成你的数据库信息）
$dbHost = 'localhost';
$dbUser = '你的数据库用户名';
$dbPass = '你的数据库密码';
$dbName = '你的数据库名';

$conn = mysqli_connect($dbHost, $dbUser, $dbPass, $dbName);
if (!$conn) {
    die('数据库连接失败：' . mysqli_connect_error());
}

// 2. 接收前端发送的事件数据
if (isset($_POST['events']) && is_array($_POST['events'])) {
    $events = $_POST['events'];
    
    // 3. 循环将每个事件存入数据库（假设你有一个`events`表，字段为`event_name`）
    foreach ($events as $event) {
        // 防止SQL注入，一定要转义特殊字符
        $safeEvent = mysqli_real_escape_string($conn, $event);
        $sql = "INSERT INTO events (event_name) VALUES ('$safeEvent')";
        mysqli_query($conn, $sql);
    }

    echo '所有事件已成功保存到数据库！';
} else {
    echo '未接收到有效的事件数据！';
}

// 4. 关闭数据库连接
mysqli_close($conn);
?>

方案二：用表单提交数据（传统方式，页面会刷新） #

如果你不需要异步操作，也可以动态创建表单并提交：

$(document).ready(function(){ 
  $('#bang').on("click", function(){ 
    // 创建一个隐藏的表单
    const submitForm = $('<form>', {
      action: 'save-events.php',
      method: 'POST',
      style: 'display: none;'
    });

    // 遍历列表项，创建隐藏的input字段
    $("#editable > li").each(function() {
      const eventText = $(this).text().trim();
      $('<input>', {
        type: 'hidden',
        name: 'events[]', // 数组形式命名，方便后端接收
        value: eventText
      }).appendTo(submitForm);
    });

    // 将表单添加到页面并提交
    submitForm.appendTo('body').submit();
  });
});

后端的处理代码和方案一的save-events.php完全一样，因为都是接收events数组。

注意事项 #

• 确保后端页面的路径正确，比如save-events.php和你的HTML文件在同一目录下，或者使用绝对路径。
• 一定要处理SQL注入：上面的示例用了mysqli_real_escape_string，更安全的方式是使用预处理语句。
• 如果你的前端和后端不在同一域名下，需要配置跨域（CORS），但一般自己的项目都是同域的，所以不用额外处理。

内容的提问来源于stack exchange，提问作者Ghassen Arfaoui