Django教程之Ajax页面无刷新数据回显

问题场景：
在日常工作中会涉及到好多查询信息，有根据手机号的，有根据人，还有一些是因场景而定的特殊查询，需要频繁的去数据库中写sql去查询，所有就想做一个运维小工具，让人使用起来更方便一些

前提条件：
工具查询列表（页面有点丑陋，回头再写个样式）
在这里插入图片描述

数据库结构：
id,name,url为主要结构
其中url 目的为相对应的html页面
比如：手机号对应 phone.html
姓名对应 name.html等

根据本地数据库中的数据，展示列表，然后点击进行不同的页面的跳转

# 运维小工具首页
def index(request):
        tool_last_list = Tool.objects.order_by('c_time')[:5]
        context = {
    
    'tool_last_list': tool_last_list}
        return render(request, 'tool/index.html', context)

这个方法是查询本地数据库中的工具列表，然后将列表传入到index.html页面

urls.py 文件中

#定义为空值，默认会找index方法
    path('', views.index, name='index'),

这个是首页展示的url

首页列表：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
{
    
    % if tool_last_list %}
    <ul>
    {
    
    % for tool in tool_last_list %}
        <li style="list-style-type:none"><a href="{% url 'tool:tools' tool.url %}">{
    
    {
    
     tool.name }}</a></li>
    {
    
    % endfor %}
    </ul>
{
    
    % else %}
    <p>No polls are available.</p>
{
    
    % endif %}
</body>
</html>

二、点击A标签进行跳转
前提：因为数据结构为名称-路由，所以 index页面中A标签中href 为字符串形式，
这其中涉及到一个问题
在urls.py中，path参数的定义
如果是id的话，开头是以path(‘int:id/’,view)，但是文中的形式是字符串形式
所有要以path('<str:name>/', views.tools,name='tools'),，意思是会按照字符串开头的进行匹配

接受A标签中的name参数，用来实现变量替换固定名称

#视图跳转控制
def tools(request, name):
    return render(request,'tool/'+name+'.html')

三、Ajax页面

html页面：

{% load static %}  #这个是django 中的加载，加载应用中的static静态目录
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script src="{% static 'tool/js/jquery-1.8.3.min.js' %}"></script>
</head>
<body>
<form action="">
    手机号：<input type="text" id="phone">
</form>
<button class="btn" id = "search">click</button>
<p class="con"></p>

ajax:

 <script>
 $("#search").click(function () {
     
     
 $.ajaxSetup({
     
     data: {
     
     csrfmiddlewaretoken: '{
     
     { csrf_token }}'}});//post请求时用来绕过csrf验证的，同表单提交的{% csrf_token %}一样
        // 发送Ajax请求
        var phone = $("#phone").val()
      $.ajax({
     
     
           url:"/tool/phone",
           type:"post",
           data:{
     
     'phone':phone},
           success:function (data) {
     
     
               console.log(data);
               //将返回的值替换到html p标签中
               $(".con").html(data)
 }
        })
    })

</script>

views 方法：

def guides(request):
    if request.method == 'POST':
        content = request.POST["phone"]
        return JsonResponse(content,safe=False)

问题总结：
1、‘QueryDict’ object is not callable 对象不可调用
解决方案：
content = request.POST（“phone”）更改为 [‘phone’]

2、In order to allow non-dict objects to be serialized set the safe parameter to False 为了允许非字典对象被序列化，请将安全参数设置为False
return JsonResponse(content) 更改为 return JsonResponse(content,safe=False)

3、ajax url 与urls中的要保持一下
比如：urls.py 中 path（‘phone’,view）没有/
ajax.url 中 tool/phone/
这样也可以请求成功，但是获取不到值，返回的也是一个页面，坑的很，一定要注意

Django教程之Ajax页面无刷新数据回显

Django教程之Ajax页面无刷新数据回显

Guess you like