版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/well2049/article/details/80166569
首先设置允许跨域,这个比较简单,直接下载第三方的django-cors-headers
1,安装pip install django-cors-headers
2,设置settings.py
添加应用:
INSTALLED_APPS = (
'corsheaders',
...
)
注释之前的CsrfViewMiddleware
,并设置新的
MIDDLEWARE = [ # Or MIDDLEWARE_CLASSES on Django < 1.10
#'django.middleware.csrf.CsrfViewMiddleware',
'corsheaders.middleware.CorsMiddleware',
'django.middleware.common.CommonMiddleware',
...
]
最后添加允许跨域请求的方式:
# 跨域增加忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
'*'
)
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
CORS_ALLOW_HEADERS = (
'XMLHttpRequest',
'X_FILENAME',
'accept',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'Pragma',
)
跨域解决以后就可以开始获取Ajax传递过来的数据了。
例如发送请求的文档t.html
内容
<body>
<form>
姓名: <input type="text" name="user" id="user"> <br>
密码: <input type="text" name="password" id="pwd">
<!-- <button type="submit">submit</button>-->
</form>
<button onclick="submit()">submit</button>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function submit(){
var qdata = {
"user": $('#user').val(),
"pwd": $('#pwd').val()
};
$.ajax({
url:'http://127.0.0.1:5000/blog/json/',
dataType:'json',
type:'POST',
data: qdata,
success: function(result){
console.log(result)
},
error:(error)=>{
console.log(error)
}
})
}
</script>
</body>
处理url请求的函数,views.py
import json
def ajax_demo(request):
if request.method == 'POST':
ret = {'status': False, 'message': ''}
user = request.POST.get('user')
pwd = request.POST.get('pwd')
print(user, pwd)
if user == '1' and pwd == '2':
ret['status'] = True
return HttpResponse(json.dumps(ret))
else:
ret['message'] = '用户名或密码错误'
return HttpResponse(json.dumps(ret))
return render(request, 'ajax_demo.html')