Ajax
ajax
发请求的方式
- 地址输入url
- form表单的get 和 post 请求
- a 标签的get请求
- ajax
ajax 和 json
-
json 是各系统,各编程语言间传输数据的一种规定格式
-
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
- 优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
- AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。是一个异步的过程
-
javascript 对 json对象的方法
JSON.parse(),# 将用于将一个 JSON 字符串转换为 JavaScript 对象 JSON.parse('{"name":"yhp"}'); JSON.stringify(),用于将 JavaScript 值转换为 JSON 字符串。 JSON.stringify({"name":"yhp"}) -
AJAX 就是使用js的技术发送请求和接受响应的
特点:
1.异步的 ,AJAX使用JavaScript技术向服务器发送异步请求；
2.是局部刷新的,AJAX请求无须刷新整个页面
3.传输的数据量少,因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；
3. AJAX常用应用场景
-
搜索引擎根据用户输入的关键字，自动提示检索关键字。
-
注册时候的用户名的查重。
-
这里就使用了AJAX技术！当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来。
-
整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
-
当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！
-
当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为lemontree的用户是否存在
-
jquery 实现ajax请求
注意 : 对于发送给服务器的data数据中,若值不是字符串形式,需要将其转换成字符串类型。
data:{
"i1":$("#i1").val(),
"i2":$("#i2").val(),
"list": JSON.stringify([1, 2, 3])
}
//对于非字符串转换为json，减少麻烦，否则需要这样取列表request.POST.getlist['list[]']
ajax示例：
{#{% csrf_token %}#}
<input type="text" name="i1">+
<input type="text" name="i2">=
<input type="text" name="i3">
<button id="b1">计算</button>
注意：form表单中的button默认为type=submit，会往form的action发送请求。改为button即可取消
<script src="/static/jquery.js"></script>
<script>
$("#b1").click(function () {
// 发ajax请求
$.ajax({
url: '/calc/',
type: 'post',
data: {
//'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val(),
a: $("[name='i1']").val(),
b: $("[name='i2']").val(),
},
success: function (res) {
$("[name='i3']").val(res)
},
})
});
</script>
url(r'^calc/', views.calc ),
def calc(request):
a = request.POST.get('a')
b = request.POST.get('b')
c = int(a) + int(b)
return HttpResponse(c)
# 若返回JsonResponse,前端接受不需要反序列化，因为设置了contenttype为json
ajax上传文件
<input type="file" id="f1">
<button id="b1">上传</button>
$('#b1').click(function () {
var formobj = new FormData();
formobj.append('file',document.getElementById('f1').files[0]);//js
// formobj.append('file',$('#f1')[0].files[0]); //jq添加键值对,值为该文件对象
formobj.append('name','yhp');//该对象当成字典用就可以
$.ajax({
url: '/upload/',
type: 'post',
data:formobj ,
processData:false, // 告诉jQuery不要去处理发送的数据，否则urlencode处理
contentType:false, // 告诉jQuery不要去设置Content-Type请求头
success: function (data) {
console.log(data)
},
})
})
视图文件
def upload(request):
print(request.FILES) -->file
print(request.POST) -->name
return render(request,'upload.html')
ajax 通过crsf 的校验
前提条件 ：确保有csrftoken的cookie
-
在页面中使用
-
加装饰器ensure_crsf_cookie
from django.views.decorators.csrf import csrf_exempt,csrf_protect, ensure_csrf_cookie
方式一
给data中添加csrfmiddlewaretoken的值,在ajax请求中
data: {
'csrfmiddlewaretoken':$('[name="csrfmiddlewaretoken"]').val(),
a: $("[name='i1']").val(),
b: $("[name='i2']").val(),
},
方式二
加请求头
headers:{
'x-csrftoken':$('[name="csrfmiddlewaretoken"]').val(),
},
方式三
自己写一个获取cookie的文件，需要时导入该文件即可
//ajax_setup.js文件
//自己写一个getCOOKIE方法
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
//每一次都这么写太麻烦了，可以使用$.ajaxSetup()方法为ajax请求统一设置。
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function (xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
**注意: ** 使用从cookie中取csrftoken的方式，需要确保cookie存在csrftoken值。
如果你的视图渲染的HTML文件中没有包含 {% csrf_token %}，Django可能不会设置CSRFtoken的cookie。这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie。
django.views.decorators.csrf import ensure_csrf_cookie
@ensure_csrf_cookie
def login(request):
pass
