django ajax 图表,django Ajax介绍

1.Ajax技术

认识ajax之前必须先了解json模块，json(Javascript  Obiect  Notation,JS对象标记)属于一种轻量级的数据交换格式

json的格式来源于js的格式，也可以说json是js的一个子集

json只认双引号的，它一定是一个字符串

1.1 js下的序列化和反序列化

JSON.stringify():用于将一个JavaScript对象转换为JSON字符串

JSON.parse():用于将一个JSON字符串转换为JavaScript对象

//===========js中的json序列化===========s= '{"name":1}';

var data=JSON.parse(s);

console.log(data);

console.log(typeof data);//object//===========js中的json的反序列化=======s2={'name':'yuan'};

console.log(JSON.stringify(s2),typeof JSON.stringify(s2))//string

1.2 ajax介绍

前端向后端发送数据的方式：

GET：地址栏、a标签、Form表单

POST：Form表单

ajax：也是前端向后端发送数据的一种方式。

AJAX(Asynchronous Javascript And XML),中文就是“异步Javascript和XML”

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

Ajax的特点：

异步交互：当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！

局部刷新：整个过程中页面没有刷新，只是刷新页面中的局部位置而已！

应用场景：

百度搜索，输入某个字或内容时，我们并没有提交请求，但是搜索栏会出现与你输入的内容相关的下拉列表，这就使用了ajax技术。整个过程中页面没有刷新，只是刷新页面中的局部位置而已！

1.3 基于jquery应用下的ajax

应用一：

通过点击按钮实现局部刷新，显示出结果6666

Index.html

Title

click

$(".btn").click(function(){

//发送ajax请求

$.ajax({

url:"/eleven/",

type:"get",

// 形参data参数必须要传，它其实就是response返回的值

success:function (data) {

$(".con").html(data);

}

})

});

views.py

defindex(request):return render(request,"index.html")defeleven(request):return HttpResponse(6666)

urls.py

path("index/",views.index),

path("eleven/",views.eleven),

点击click最终效果：(这个效果并没有全局刷新，而是点击后局部刷新得到的)

应用二：

在url页面按钮框输入数字实现加法运算

这里我不一一例了，只用把案例一index.thml中输入部分和jquery部分换掉即可

index.html

{#计算#}

+ =

计算{% csrf_token %}//携带参数进行请求，获取的n1,n2就是我们在浏览器输入的值。data里面的值传给了视图函数

$(".cal").click(function () {

var n1 = $(".n1").val();

var n2 = $(".n2").val();

$.ajax({

url: /cal/,

type: "post",

data: {

a: n1,

b: n2,

csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),

},

success: function (data) {

console.log(data);

$(".n3").val(data);

}

})

});

views.py

defcal(request):

a= request.POST.get("a")

b= request.POST.get("b")

res= int(a) +int(b)return HttpResponse(str(res))

urls.py

path("index/",views.index),

path("cal/", views.cal),

应用三：

实现登录验证功能

form表单已经不用再定义是什么请求，这一步都在ajax中实现

{#用户验证#}

用户名密码

// 登录验证

$("#login_btn").click(function () {

$.ajax({

url: "/login/",

type: "post",

data: {

user: $("#user").val(),

pwd: $("#pwd").val(),

csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),

},

// 这里关键是视图函数返回的data的数据类型

success: function (data) {

console.log(data);

console.log(typeof data);

var data = JSON.parse(data);

console.log(data);

console.log(typeof data);

if (data.user) {

}

// if(user),表明成功，失败了对传过来的文本修改颜色

else {

$(".error").text(data.msg).css({"color": "red", "margin-left": "20px"})

setTimeout(function(){

setTimeout(function(){

$(".error").text("")

},1000)

}

}

})

});

views.py

from book.models importUserimportjsondeflogin(request):#先要从数据库导入相关个人账号和密码

user = request.POST.get("user")

pwd= request.POST.get("pwd")#获取账号和密码

user_obj = User.objects.filter(user=user, pwd=pwd).first()

response= {"user": None, "msg": None}ifuser_obj:

response["user"] =user_obj.userelse:

response["msg"] = "用户名或者密码不一致"

#确保dumps的数据编码一致性

return HttpResponse(json.dumps(response, ensure_ascii=False))

models.py

classUser(models.Model):

user= models.CharField(max_length=32)

pwd= models.CharField(max_length=32)

urls.py

path("index/",views.index),

path("login/", views.login),

效果：

1.4 csrf跨站请求伪造

一般会由于这个问题报一个Fororbidden的错，自己在ajax下的data中组装一组键值对即可解决

{% csrf_token %}data:{

csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),

name:$(":text").val(),

pwd:$(":password").val()

},