django 支持ajax6,django 系列 6--Ajax01 特点, 基本格式, 向前端发送数据

django 系列 6--Ajax01 特点, 基本格式, 向前端发送数据

一. Ajax 了解

Ajax(Asynchronous JavaScript And xml) 优点是在不重新加载整个页面的情况下, 可以与服务器交换数据并更新部分网页内容

优点:

1.Ajax 使用 JavaScript 技术向服务器发送异步请求

2.Ajax 请求无需刷新整个页面

3. 服务器响应内容不再是整个页面, 而是页面中的部分内容, 所以 Ajax 性能高

二. Ajax 使用

基本格式// 基于按钮点击事件实现的

$('#sub').click(function(){

//$.Ajax({键值对参数})

$.Ajax({

url:"{% url'login'%}",

type:'post',

data:{'username':uname,'pwd':pwd,'csrfmiddlewaretoken':csrf_token},

success:function(response){// response 这个参数名字是自定义的

}

})

})

1.jQuery 的实现send_Ajax

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

$.Ajax({

url:"/handle_Ajax/",

type:"POST",

data:{username:"tom",password:123},

success:function(data){

console.log(data)

},

error:function(jqXHR,textStatus,err){

console.log(arguments);

},

complete:function(jqXHR,textStatus){

console.log(textStatus);

},

statusCode:{

'403':function(jqXHR,textStatus,err){

console.log(arguments);

},

'400':function(jqXHR,textStatus,err){

console.log(arguments);

}

}

})

})

2. 原生 JS 实现varbt2=document.getElementById("bt2");

bt2.οnclick=function(){

// 原生 JS

varxmlHttp=newXMLHttpRequest();

xmlHttp.open("POST","/ajax_test/",true);

xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlHttp.send("username=tom&password=123");

xmlHttp.onreadystatechange=function(){

if(xmlHttp.readyState===4&&xmlHttp.status===200){

alert(xmlHttp.responseText);

}

};

};

三. 使用 Ajax 传送数据

用一个简单的登录验证实例来说明, 用户名和密码正确提示成功. 否则显示失败

发送的数据如果是字典时, 其中的引号必须是双引号, 否则传到前端使用会报错,

如 { "data": data } , 不要用 {'data': data}

1. 使用 JsonResponse 来发送数据 (最好)

这样发送的数据, 前端就不用解析了, 可以直接当作对象来使用

views.pyfromdjango.shortcutsimportrender,redirect,HttpResponse

fromdjango.httpimportJsonResponse

fromapp01importmodels

# Create your views here.

deflogin(request):

ifrequest.method=='POST':

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

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

print(username,password)

ret=models.Userinfo.objects.filter(username=username,password=password)

print(ret)

a={"status":None}

ifret:

a["status"]=True

print(a)

returnJsonResponse(a)

else:

returnHttpResponse("fail")

else:

returnrender(request,"login.html")

login.HTML

{% load static %}

Title

{% csrf_token %} 用户名:

密码:

登陆

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

varuname=$("#username").val();

varpwd=$("#password").val();

varcsrf_token=$("input[name=csrfmiddlewaretoken]").val();

$.Ajax({

url:"{% url'login'%}",

type:"post",

data:{

"username":uname,

"password":pwd,

"csrfmiddlewaretoken":csrf_token

},

success:function(response){

console.log(response,typeofresponse);

if(response.status){

$("span").text("登陆成功");

}else{

$("span").text("失败");

}

}

})

})