跳到主要内容

JQuery Ajax

jQuery AJAX​

以下是使用 jQuery AJAX 进行基本 CRUD 操作的详细示例和步骤。假设我们将与 https://jsonplaceholder.typicode.com/posts 进行交互，这是一个模拟的 RESTful API。

1. 引入 jQuery​

首先，在你的 HTML 文件中引入 jQuery：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery AJAX CRUD</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <!-- 你的内容 -->
</body>
</html>

2. CRUD 示例代码​

2.1 创建（Create）​

const createPost = () => {
    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/posts',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
            title: 'foo',
            body: 'bar',
            userId: 1,
        }),
        success: (data) => {
            console.log('Created Post:', data);
        },
        error: (jqXHR, textStatus, errorThrown) => {
            console.error('Error creating post:', textStatus, errorThrown);
        }
    });
};

// 调用创建函数
createPost();

2.2 读取（Read）​

const fetchPosts = () => {
    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/posts',
        method: 'GET',
        success: (data) => {
            console.log('Posts:', data);
        },
        error: (jqXHR, textStatus, errorThrown) => {
            console.error('Error fetching posts:', textStatus, errorThrown);
        }
    });
};

// 调用获取函数
fetchPosts();

2.3 更新（Update）​

const updatePost = (postId) => {
    $.ajax({
        url: `https://jsonplaceholder.typicode.com/posts/${postId}`,
        method: 'PUT',
        contentType: 'application/json',
        data: JSON.stringify({
            title: 'Updated Title',
            body: 'Updated Body',
            userId: 1,
        }),
        success: (data) => {
            console.log('Updated Post:', data);
        },
        error: (jqXHR, textStatus, errorThrown) => {
            console.error('Error updating post:', textStatus, errorThrown);
        }
    });
};

// 调用更新函数，假设要更新 ID 为 1 的帖子
updatePost(1);

2.4 删除（Delete）​

const deletePost = (postId) => {
    $.ajax({
        url: `https://jsonplaceholder.typicode.com/posts/${postId}`,
        method: 'DELETE',
        success: (data) => {
            console.log('Deleted Post:', data); // 通常，删除返回 204 No Content
        },
        error: (jqXHR, textStatus, errorThrown) => {
            console.error('Error deleting post:', textStatus, errorThrown);
        }
    });
};

// 调用删除函数，假设要删除 ID 为 1 的帖子
deletePost(1);

3. 总结​

以上代码展示了如何使用 jQuery AJAX 进行 CRUD 操作，包括创建、读取、更新和删除操作。确保在调用这些函数时，你的网络连接是正常的，并且 API URL 是可访问的。你可以根据需要修改请求的数据和 URL。

表单数据​

如果你使用的是表单数据，代码可以如下：

const createPost = () => {
    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/posts',
        method: 'POST',
        data: {
            title: 'foo',
            body: 'bar',
            userId: 1
        },
        success: (data) => {
            console.log('Created Post:', data);
        },
        error: (jqXHR, textStatus, errorThrown) => {
            console.error('Error creating post:', textStatus, errorThrown);
        }
    });
};

// 调用创建函数
createPost();
0%