基于ajax的j简单项目
时间: 2023-06-19 22:08:23 浏览: 71
一个基于 AJAX 的简单项目可以是一个 To-Do List 应用程序。以下是一个示例:
HTML 文件:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>To-Do List</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>To-Do List</h1>
<input type="text" id="newTask">
<button id="addTask">Add Task</button>
<ul id="taskList"></ul>
</body>
</html>
```
JavaScript 文件(script.js):
```javascript
$(document).ready(function() {
// 加载任务列表
loadTasks();
// 添加新任务
$('#addTask').click(function() {
var task = $('#newTask').val();
addTask(task);
});
// 删除任务
$(document).on('click', '.deleteTask', function() {
var taskId = $(this).data('id');
deleteTask(taskId);
});
});
function loadTasks() {
$.ajax({
url: 'api.php?action=getTasks',
type: 'GET',
dataType: 'json',
success: function(response) {
$.each(response, function(index, task) {
$('#taskList').append('<li>' + task.task + ' <button class="deleteTask" data-id="' + task.id + '">Delete</button></li>');
});
}
});
}
function addTask(task) {
$.ajax({
url: 'api.php?action=addTask',
type: 'POST',
dataType: 'json',
data: {task: task},
success: function(response) {
$('#taskList').append('<li>' + task + ' <button class="deleteTask" data-id="' + response.id + '">Delete</button></li>');
$('#newTask').val('');
}
});
}
function deleteTask(taskId) {
$.ajax({
url: 'api.php?action=deleteTask',
type: 'POST',
dataType: 'json',
data: {id: taskId},
success: function(response) {
$('button[data-id="' + taskId + '"]').parent().remove();
}
});
}
```
PHP 文件(api.php):
```php
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接是否成功
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// 处理 GET 请求
if ($_SERVER["REQUEST_METHOD"] == "GET") {
if ($_GET["action"] == "getTasks") {
// 获取任务列表
$sql = "SELECT * FROM tasks";
$result = $conn->query($sql);
$tasks = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$tasks[] = array('id' => $row["id"], 'task' => $row["task"]);
}
}
echo json_encode($tasks);
}
}
// 处理 POST 请求
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if ($_POST["action"] == "addTask") {
// 添加新任务
$task = $_POST["task"];
$sql = "INSERT INTO tasks (task) VALUES ('$task')";
if ($conn->query($sql) === TRUE) {
$id = mysqli_insert_id($conn);
echo json_encode(array('id' => $id));
} else {
echo json_encode(array('error' => $conn->error));
}
} else if ($_POST["action"] == "deleteTask") {
// 删除任务
$id = $_POST["id"];
$sql = "DELETE FROM tasks WHERE id=$id";
if ($conn->query($sql) === TRUE) {
echo json_encode(array('success' => true));
} else {
echo json_encode(array('error' => $conn->error));
}
}
}
$conn->close();
?>
```
该项目使用 AJAX 与后端 PHP 文件进行通信。当用户在文本框中输入新任务并单击“添加任务”按钮时,JavaScript 函数 `addTask()` 发送一个 POST 请求到服务器,并将新任务添加到数据库中。当用户单击“删除”按钮时,JavaScript 函数 `deleteTask()` 发送一个 POST 请求到服务器,并从数据库中删除相应的任务。当页面加载时,JavaScript 函数 `loadTasks()` 发送一个 GET 请求到服务器,获取任务列表,并将每个任务添加到 HTML 中的无序列表中。
请注意,此示例仅供演示目的。在实际应用程序中,应考虑安全性和数据验证。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)