html+ajax+django+前后端分离
1.基本写法这里使用jq的ajax
可以参考菜鸟教程和菜鸟工具
$.ajax({
url:‘’, //接口地址
type：‘’, //默认是get;这是请求方式
header:{},
dataType:“”,//设置接受到的响应数据的格式
data:‘’ //给后端的数据 json类型
success:function(res){
//请求成功的函数 httpstatuscode=200，这里函数可以function命名单独拿出来写
},
error:function(e){
//请求失败后的函数 httpstatuscode!=200
}
})
url说明：
相对路径
//url 以根路径开头（/）的请求路径，表示该路径是基于服务器的根路径的，则请求地址为服务器路径+url,
//在本地开发的时候，一般http://localhost:port是作为服务器路径的
//不以根路径开头，表示该路径是基于当前html路径的，请求地址为页面地址+url
绝对路径
var baseurl=“http://ip+port/”;//ajax请求地址头部，服务器路径
url:baseurl+“相对路径”
模拟前后端分离（不完全的）
django创建一个项目，前端后端部署在同一个django服务里，其实没有分离，只是写法上分离了（注意分离不能用模板标签）
*
test.html：
2.1.2前端部署ajax测试 indexindex
index2index2
index3index3
index4index4
index5
index6
路由
path('index/',views.index), # 使用 django本身作为静态网页服务器 ，来部署前端页面，为了方便，这里使用同一个django，所以不包含跨域配置
视图
def index(request): return render(request,'test.html')
你也可以尝试用with open 打开test.html文件，将其内容给return Httpresoponse() 来模拟前端,frontend相当于render里的templates文件夹，记得render写法要配置模板位置哦
def index(request):
with open(‘frontend/test.html’,‘rb’) as f:
html = f.read()
return HttpResponse(html)
path('indexApi/',views.indexApi),
path('indexApi2',views.indexApi2),
path('indexApi3',views.indexApi3),
path('indexApi4',views.indexApi4),
path('indexApi5',views.indexApi5),
path('indexApi6',views.indexApi6),
2.2.2视图
#无参数的get的 api（表单提交）
def indexApi(request):
return JsonResponse({'code':200,'msg':'这是后端jsonresponse','data':'ajax-get不传参'})
#带参数的get的 api（表单提交），参数会 ？拼接ajax参数
def indexApi2(request):
print(request.GET)
param=request.GET
print(param.get('Api2'))
return JsonResponse({'code':200,'msg':'这是后端jsonresponse','data':'ajax-get传参,参数是：{0}'.format(param.get('Api2'))})
#无参数的post的 api
@csrf_exempt #防止csrf
def indexApi3(request):
return JsonResponse({'code':200,'msg':'这是后端jsonresponse','data':'ajax-post不传参'})
#有参数的post的 api
@csrf_exempt #防止csrf
def indexApi4(request):
param1=request.body
print(param1)
param2=request.POST
print(param2)
return JsonResponse({'code':200,'msg':'这是后端jsonresponse','data':'ajax-post传参,参数是：{0}'.format(param2.get('Api4'))})
#表单提交
@csrf_exempt #防止csrf
def indexApi5(request):
param=request.POST
print(param)
name=param.get('name')
age=param.get('age')
return JsonResponse({'code':200,'msg':'ajax post表单','data':'{}今年{}岁'.format(name,age)})
#json格式表单提交，POST无法获取
@csrf_exempt #防止csrf
def indexApi6(request):
# print(request.method)
param_b=request.body
print(param_b)
param_dict=json.loads(param_b) #将json格式数据转换为python字典类型,即对对象进行json decode解码
print(param_dict)
return JsonResponse({'code':200,'msg':'ajax post json格式提交表单','data':'{}'.format(param_dict)})
3.进一步分离
真正分离的话，前后端各一个服务器
两者各自一个不同端口的django服务
前端，只部署前端部分，端口8001，ajaxurl也要带上http://后端ip+后端端口，写绝对路径不容易出错，http://不可少
后端，只部署接口部分，端口8002，配置跨域
注意跨域问题，host问题,后端设置django-cors-headers解决
使用更好的服务器
nginx部署前端项目并配置proxspass给后端
apache(+mod_wsgi)部署django后端接口
可以先单独配一个端，另一个还是django，便于测试和理解一步步来，便于理解与错误解决
