alibaixiu——分类管理

最新推荐文章于 2024-10-04 20:38:15 发布

草莓味的狮子座leo

最新推荐文章于 2024-10-04 20:38:15 发布

阅读量107

点赞数

分类专栏： alibaixiu 文章标签： ajax js

本文链接：https://blog.csdn.net/Mikon_0703/article/details/112972986

版权

alibaixiu 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文档详细介绍了如何使用Ajax技术实现博客分类的管理，包括通过表单提交添加分类、点击事件委托展示分类列表、编辑分类信息以及删除分类的功能。每个步骤都配以具体的JavaScript代码示例，涵盖了POST、GET、PUT和DELETE四种HTTP方法的使用，确保了分类管理的完整流程。

摘要由CSDN通过智能技术生成

---------------------分类管理------------------------------

在这里插入图片描述

1. 添加分类

在这里插入图片描述

$('#addCategories').on('submit', function() {

    // 获取到用户在表单中输入的内容
    var formData = $(this).serialize()
        // console.log(formData)

    // 调用分类添加接口，实现添加分类功能
    $.ajax({
            type: 'POST',
            url: '/categories',
            data: formData,
            success: function() {
                location.reload()

            },
            error: function(err) {
                console.log(err)
            }
        })
        // 阻止表单提交的默认行为
    return false

})

用事件委托的方式为表单添加submit事件
每一个表单input元素添加name属性，属性值和接口一致
使用serialize()获取表单输入信息
发送ajax请求，实现添加功能

2. 分类列表展示

在这里插入图片描述

// 根据 id 查询分类信息，并显示
$('#categoryBox').on('click', '.edit', function() {

    // 获取被点击分类的id值(编辑按钮)
    var id = $(this).attr('cate_id')
        // console.log(id)
    $.ajax({
        type: 'get',
        url: '/categories/' + id,
        success: function(response) {
            // console.log(response)
            // { data: response } 无法拿到值
            
            var html = template('editCategoryTpl', response)
                // console.log(html)

            $('#modifyBox').html(html)
        },
        error: function(err) {
            console.log(err)
        }

    })

})

3. 编辑分类列表

在这里插入图片描述

// 根据 id 修改分类
$('#modifyBox').on('submit', '#modifyCategories', function() {

    // 获取编辑后的分类信息
    var formData = $(this).serialize()
    var id = $(this).attr('cate_id')
        // console.log(id)
    $.ajax({
        type: 'put',
        url: '/categories/' + id,
        data: formData,
        success: function() {
        // 重新刷新加载数据
            location.reload()

        }
    })

})

在这里插入图片描述

4. 删除分类

<a href="javascript:; " class="btn btn-danger btn-xs delete" cate_id={{$value._id}}> 删除 </a>

//根据 id 分类数据删除
$('#categoryBox').on('click', '.delete', function() {
    var id = $(this).attr('cate_id')
        // console.log(id)
    if (confirm('确认删除该分类')) {
        $.ajax({
            type: 'DELETE',
            url: '/categories/' + id,
            success: function() {
                location.reload()

            }
        })
    }
})