*Django中的Ajax 纯js的书写样式1

搭建项目

建立一个Djano项目,建立一个app,建立路径,视图函数大多为render,

Ajax的创建

urls.py

path('index/',views.index),
path('index2/',views.index2),

views.py

def index(request):
    return render(request,'01.html')
def index2(request):
    return render(request,'02.html')

01.html

readyState共有五个返回值【0 1 2 3 4】,

0:ajax对象创建成功

1:准备请求结束

2 3 4:服务器接收请求,服务器解析,服务器响应请求【这三步都在监听回调函数中触发】

除了服务器响应外,还要确认资源

200:成功访问【201,204等】

300:服务器有多个可以响应客户端请求的资源【304,307等】

404:访问资源不存在【400,401等】

500: 服务器奔溃【505等】


    
    

执行python manage.py runserver

浏览器点击send,看控制台是否打印【02.html如下显示】

传递参数【get/post】

urls.py

#传递参数get/post
path('p/',views.p),#send
path('p2/',views.p2),#back

views.py

注意post与get请求

def p(request):
    return render(request,'03.html')
def p2(request):
    if request.method == 'POST':
        print('进入post请求')
        user = request.POST.get('name')
        pwd = request.POST.get('pwd')
        print(user,pwd)
        return render(request, '04.html', {'name': user, 'password': pwd})
    print('进入get请求')
    user=request.GET.get('name')
    pwd=request.GET.get('pwd')
    return render(request,'04.html',{'name':user,'password':pwd})

03.html

get请求大致不变【url携带参数】

post请求必须携带参数,所以参数是放在data中,并且要避免csrf-token的验证,给请求头除了原本的'Content-type'还要加上csrf的验证,参数直接由send方法发送

转义字符是英文输入法下的 ~ 键


{% csrf_token %}
用户名:
密码:

04.html


用户名{{ name }}
密码{{ password }}

异步

open的第三个参数

预留加载位置【例如网络不佳情况下的图片加载失败】,还能执行其它函数


    

获取与解析本地Json

*Django中的Ajax 纯js的书写样式1_第1张图片建立json文件

{
  "total": 4,
  "data": [
    {
      "name": "三国演义",
      "category": "文学",
      "desc": "一个军阀混战的年代"
    },{
      "name": "三国演义2",
      "category": "文学2",
      "desc": "一个军阀混战的年代2"
    }
  ],
  "obj": {"adf": "adf"}
}

Json文件中必需使用双引号,最后一个数据不加逗号,比如在data中的列表中第一个字典,最后一行数据不能加逗号否则报Uncaught SyntaxError: Expected double-quoted property name in JSON...

urls.py

#ajax获取本地json数据-解析显示页面
path('gjson/', views.Jsond, name='gjson'),
path('huoqu/',views.huoqu),

views.py

def huoqu(request):
    return render(request,'06.html')

def Jsond(request):#报错
    with open('static/data.json', 'r') as json_file:
        data = json.load(json_file)
    response = JsonResponse(data)
    # 设置X-Content-Type-Options头部
    response['X-Content-Type-Options'] = 'nosniff'
    return response

'X-Content-Type-Options':nosniff确保浏览器按照指定的选项来处理响应的内容类型,以提高安全性。

不加报ncaught SyntaxError: Unexpected token 'o', "nosniff" is not valid JSON

json也可以写为这样,不过要导入JsonResponse

from django.http import JsonResponse

def Jsond(request):#JsonResponse(json文件)
    with open('static/data.json', 'r') as json_file:
        data = json.load(json_file)

    return JsonResponse(data)

06.html




    
    Title
    


    
    
    {# 将json数据插入#}

 将获取到的json数据传入li,加进先前准备好的ul中*Django中的Ajax 纯js的书写样式1_第2张图片

你可能感兴趣的:(javascript,django,ajax)