淮安阿里云代理商：ajax循环添加数据库数据

luotuoemo • 2024年3月10日 17:35 • 阿里云 • 阅读 435

以JavaScript为例，使用AJAX可以循环添加数据到数据库。以下为示例：

在HTML页面中创建一个表单，包括添加数据的文本框和提交按钮。

<form>
  <input type="text" id="dataInput" placeholder="输入要添加的数据">
  <button type="submit" id="submitBtn">提交</button>
</form>

在JavaScript中使用AJAX来处理表单的提交事件。

// 获取表单元素
var dataInput = document.getElementById("dataInput");
var submitBtn = document.getElementById("submitBtn");

// 给提交按钮绑定点击事件
submitBtn.onclick = function() {
  // 获取要添加的数据
  var data = dataInput.value;

  // 发送AJAX请求
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/addData.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 添加成功，清空文本框
      dataInput.value = "";
    }
  };
  xhr.send("data=" + data);  // 提交数据
};

在服务器端（例如PHP），解析提交的数据并将数据添加到数据库中。

<?php
// 连接数据库
$dbhost = "localhost";
$dbuser = "your_username";
$dbpass = "your_password";
$dbname = "your_database";
$conn = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname) or die("连接失败：" . mysqli_connect_error());

// 接收客户端提交的数据
$data = $_POST["data"];

// 将数据添加到数据库中
$sql = "INSERT INTO your_table (data) VALUES ('" . mysqli_real_escape_string($conn, $data) . "')";
mysqli_query($conn, $sql);

// 返回成功消息
echo "添加成功";

// 关闭连接
mysqli_close($conn);
?>

最后，客户端会收到来自服务器的成功消息，意味着数据已经被添加到数据库中。

首先，需要建立一个包含需要添加的数据的数组。然后，通过ajax循环数组中的每个元素，将其添加到数据库中。代码示例：

// 假设数据数组为dataArr
var dataArr = [
  { name: '张三', age: 20 },
  { name: '李四', age: 25 },
  { name: '王五', age: 30 }
];

// 循环遍历数据数组并添加到数据库
for (var i = 0; i < dataArr.length; i++) {
  $.ajax({
    type: "POST",
    url: "insertData.php",
    data: dataArr[i],
    success: function(result){
      console.log("数据添加成功：" + result);
    },
    error: function(){
      console.log("数据添加失败！");
    }
  });
}

在上述代码中，通过循环遍历数据数组，并通过ajax请求将每个元素的数据添加到数据库中。其中，需要新建一个名为”insertData.php”的PHP文件，在该文件中实现数据插入操作，示例代码如下：

<?php
// 连接数据库
$con = mysqli_connect("localhost", "username", "password", "database");

// 判断是否连接成功
if (mysqli_connect_errno()) {
  echo "连接数据库失败：" . mysqli_connect_error();
}

// 获取POST请求参数
$name = $_POST['name'];
$age = $_POST['age'];

// 执行插入数据操作
$sql = "INSERT INTO users (name, age) VALUES ('$name', '$age')";
if (mysqli_query($con, $sql)) {
  echo "添加成功！";
} else {
  echo "添加失败：" . mysqli_error($con);
}

// 关闭数据库连接
mysqli_close($con);
?>

在上述示例代码中，通过$_POST获取上述ajax请求中传递的数据，然后通过INSERT语句将数据插入到名为”users”的表中。最后，通过mysqli_error函数判断插入数据是否成功。如果成功，则返回”添加成功！”，否则返回”添加失败：”及错误信息。

发布者：luotuoemo，转转请注明出处：https://www.jintuiyun.com/159162.html