目录
1.创建Django项目
Django之创建项目【二】:https://blog.csdn.net/Burgess_zheng/article/details/86505526
2.创建app(并且app目录下创建一个urls.py文件)
进入项目目录下
创建app命令:
F:\Burgess\Python\pycharm实验脚本\test\project_burgess>python manage.py startapp submit_views
3.定义setting配置文件的静态目录路径和创建静态目录(我们需要js文件)
路径:project_burgess/project_burgess/setting
4.定义请求的URL路由分发
路径:project_burgess/project_burgess/urls.py
from django.contrib import admin from django.urls import path,re_path #Django版本2.0以上 from project_burgess import views from django.conf.urls import url #Django2.0 from django.conf.urls import include urlpatterns = [ path('admin/', admin.site.urls), #提交各种数据数据类型测试 re_path('submit/', include("submit_views.urls")), # url(r'^submit/', include("submit_views.urls")), ]
5.定义app下的URL路由
路径:project_burgess/submit_views/urls.py
__author__ = "Burgess Zheng" #!/usr/bin/env python #-*- coding:utf-8 -*- from django.urls import path,re_path #Django版本2.0以上 from submit_views import views from django.conf.urls import url #Django2.0 app_name='namespace' urlpatterns = [ #ajax re_path('ajax/', views.ajax), # url(r'^ajax/', views.ajax), ]
6.定义url对应函数处理
路径:project_burgess/submit_views/views.py
def ajax(request): if request.method == "GET": return render(request, 'ajax.html') elif request.method == "POST": import json ret = {'status': True, 'error': None, 'data': None} try: # 循环里面的内容 h = request.POST.get('hostname') i = request.POST.get('ip') p = request.POST.get('port') b = request.POST.get('b_id') print('hostname:%s ip:%s port:%s b_id:%s'%(h,i,p,b)) if h and len(h) > 5: # 如果是真并且长度大于5 、if h :如果h(内容不是空)为真 #models.Host.objects.create(hostname=h, ip=i, port=p, b_id=b) print('存入数据库成功') else: ret['status'] = False ret['error'] = "太短了" except Exception as e: # 抓住Exception 所有的异常 ret['status'] = False ret['error'] = '请求错误' print(ret) return HttpResponse(json.dumps(ret)) # 把字典序列成字符串返回给模板的ajax
7.定义响应的html文件
涉及到csrf跳转:Django之CSRF XSS原理解析 https://blog.csdn.net/Burgess_zheng/article/details/86548425
路径:project_burgess/templates/ajax.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="add_form" method="POST" action="/submit/ajax/"> {% csrf_token %} <a id="csrf" style="display: none">{{ csrf_token }}</a> <input type="text" name="hostname" style="display: block"> <input type="text" name="ip" style="display: block"> <input type="text" name="port" style="display: block"> <input type="text" name="b_id" style="display: block"> <input type="submit" name="submit提交"> <input id="ajax_submit" type="button" value="ajax提交"> <span id="error_msg" style="color: red"></span> </form> <script src="/static/jquery.min.js"></script> <script> $('#ajax_submit').click(function () { $.ajax({ url:"/submit/ajax/", type:'POST', //data:{'user':123,'host_list':{'key':'value','key':'value'}}, //如果data提交的数据的字典里面的key的value是字典提交会报错如上: // 需要设置下面的参数: //traditional:true, //data:{'hostname':$('#host').val(), // 'ip':$('#ip').val(), // 'port':$('#port').val(), // 'b_id':$('#sel').val() // }, data:$('#add_form').serialize(), //ajax的data发送数据的时候可以一条命令解决==上面data发送的简写 //只要匹配的from标签. serialize(), 该form标签的所有name的值都会发送过去 headers:{'X-CSRFtoken':$('#csrf').text()}, dataType:'JSON', //之前我们都需要在succses参数的function内里写Json.parse(data)对后端响应的数据字符串反序列化 //如果写上 dataType:'JSON',自动把接收数据进行反序列化,succses参数的function内就无需进行反序列化 //发送指定接收路径,请求类型,数据给后台,然后进入等待状态 //直到收到后台的数据才执行下面的函数 success: function(data){ //var data = JSON.parse(data); //JSON.parse(data):把字符串转换成(反序列化)对象 //由于我们dataType参数设置了自动反序列化数据这里就注释掉 //如a =[1,2,3,4] //JSON.stringigy(a):把对象转换成(序列化)字符串 if(data.status){ location.reload(); //假如该status(key)的值是true,就为真,重新刷新页面 //对象就可以用点.取值 //提交后台判断成功之后的一些列操作 }else { //否则在匹配的标签添加内容 console.log(data); $('#error_msg').text(data.error); } }, error:function () { //出现未知的情况才执行这个函数,succses是只要发送到后台就算成功,获取错误信息返回给用户,成功后的事 } }) }); //简单的写法(推荐上面的写法) //$.get(url="xx",data{},susccess:function(data){if....} // $.post(url="xx",data{},susccess:function(data){if....} // $.getJson(....} </script> </body> </html>
8.启动Django
手动:python manage.py runserver 127.0.0.1:8000
pycharm:
9.浏览器访问URL结果
get请求
点击第一个提交为form提交
查看后台
get请求
点击ajax提交
查看后台
Django之Ajax(jQuery)and原生Ajax(XMLhttpRequest))【六】 https://blog.csdn.net/Burgess_zheng/article/details/86548396