Django使用Ajax删除数据库信息

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 一、staitc文件夹是什么？
• • • 配置static文件夹的方法如下：
• 二、配置步骤
• • • 1. 在项目文件夹下，与app文件夹在同一级目录下创建static文件夹，在里面存js,css,image之类的文件夹
    • 2. 在setting.py里配置static的路径
    • 3. 在html中的使用方法
    • • 在html中使用静态文件里的js文件
• 三、使用Ajax对数据表信息进行删除
• • • 不同html层级之间使用javascript
    • Ajax使用
    • • • 删除按钮的设置，id的循环配置
        • 使用Ajax
• 总结

---

一、staitc文件夹是什么？

在使用Debug=True之前，static文件夹里的文件是没有不同的，但是当Debug=False时，后端的其他文件夹的文件是无法被访问的，而所有能被访问的文件都需要被放在static里头。

配置static文件夹的方法如下：

1. 在项目文件夹下，与app文件夹在同一级目录下创建static文件夹，在里面存js,css,image之类的文件夹
2. 在setting.py里配置static的路径
3. 在html中的使用方法

二、配置步骤 1. 在项目文件夹下，与app文件夹在同一级目录下创建static文件夹，在里面存js,css,image之类的文件夹

2. 在setting.py里配置static的路径

STATICFILES_DIRS = [
    os.path.join(base_DIR, 'static')
]

3. 在html中的使用方法

#在html文件最前面写上这句话，
{% load static %}

在html中使用静态文件里的js文件

三、使用Ajax对数据表信息进行删除 不同html层级之间使用javascript

#在html中，被继承的在需要书写的地方写上，index.html
{% block javascript %}
{% endblock %}

#继承的时候,home.html
{% block javascript %}

    

{% endblock %}

Ajax使用 删除按钮的设置，id的循环配置

   {% for i in order reversed %}
       
           {{ i.id }}
           {{ i.customer }}
           {{ i.product }}
           {{ i.time_created }}
           {{ i.status }}
           
               update
           
               remove
           
       
  {% endfor %}

使用Ajax

	#order为后端向前端传递的context的信息，即展示的订单信息，对每列的id设置点击事件
     {% for i in order reversed %}
            $(document).ready(function () {
                $('#{{ i.id }}-del').click(function () { #根据id进行点击设置
                    var r = /confirm/i("你确定要删除这个订单吗？")   #删除订单的对话框
                    if (r) {
                        $.ajaxSetup({   #设置令牌，和form表单一样，只要是和后端交互就需要这个攻击令牌
                            data: {
                                csrfmiddlewaretoken: '{{ csrf_token }}'
                            }
                        })
                        $.ajax({
                            type: "POST",
                            url: "{% url 'homepage' %}", #跳转的位置
                            data: {		#使用键值对传递给后端需要删除的id
                                'order_del':{{ i.id }}
                            },
                            dataType: 'text',
                            success: function () {
                                window.location.reload()  #对前端界面进行刷新
                            },
                            error: function () {
                                console.log("Somewhere is wrong!")
                            }
                        })
                    }
                })
            })
        {%  endfor %}

    

总结

关于Ajax的使用，删除修改增加是可以的，因为首页是查询，如果在前端使用条件查询时用的是Ajax方法，就会对结果产生冲突

#Ajax的执行流程
#页面加载时，后端全部查询

#点击Ajax传递后端 if判断后 进行条件查询后返回

#刷新界面，重新全部查询，覆盖原本Ajax查询到的数据

#所以最后发现条件查询无法查询并刷新到界面上
#这时候最好是使用Form表单进行提交，后端直接返回，就可以进行条件查询，使用表单的形式，不会重新加载页面，但是会刷新页面，这样就可以更好的进行条件查询了
if request.method == 'POST':
        print(request.POST)
        if request.POST["title"] is not '' or request.POST["author"] is not '':
            title = request.POST["title"]
            author = request.POST.get('author')
            print('title:', title, author)
            try:
                if title is '':
                    res = BookInfo.objects.filter(author=author)
                else:
                    res = BookInfo.objects.filter(title=title)
                print(res)
                res_count = res.count()
            except:
                print("未找到数据")
                context = {
                    'bookInfo': [],
                    'b_count': 0,
                }
                return render(request, "aoapp/home_book.html", context=context)
        else:
            print("未输入")
            res = BookInfo.objects.all()
            res_count = bookInfo.count()
        print(res,"-"*19)
        context = {
            'bookInfo': res,
            'b_count': res_count,
        }
        return render(request, "aoapp/home_book.html", context=context)
context = {
     'bookInfo': bookInfo,
     'b_count': b_count,
 }
 return render(request, "aoapp/home_book.html", context=context)