django系列6--Ajax01 特點, 基本格式, 向前端發送數據
阿新 • • 發佈：2019-03-06
ade django type int doc lock 異步請求 技術分享 pri
一.Ajax了解
AJAX（Asynchronous Javascript And XML）優點是在不重新加載整個頁面的情況下,可以與服務器交換數據並更新部分網頁內容
優點:
1.ajax使用JavaScript技術向服務器發送異步請求
2.ajax請求無需刷新整個頁面
3.服務器響應內容不再是整個頁面,而是頁面中的部分內容,所以ajax性能高
二.Ajax使用
基本格式
//基於按鈕點擊事件實現的 <script src="{% static 'js/jquery.js' %}"></script> <script> $('#sub').click(function () { //$.ajax({鍵值對參數}) $.ajax({ url:"{% url 'login' %}", type:'post', data:{'username':uname,'pwd':pwd,'csrfmiddlewaretoken':csrf_token}, success:function (response) { // response這個參數名字是自定義的 } }) }) </script>
1.jQuery的實現
<button class="send_Ajax">send_Ajax</button> <script> $(".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); } } }) }) </script>
2.原生Js實現
var bt2 = document.getElementById("bt2"); bt2.onclick = function () { // 原生JS var xmlHttp = new XMLHttpRequest(); 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.py
from django.shortcuts import render,redirect,HttpResponse
from django.http import JsonResponse
from app01 import models
# Create your views here.
def login(request):
if request.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}
if ret:
a["status"] = True
print(a)
return JsonResponse(a)
else:
return HttpResponse("fail")
else:
return render(request,"login.html")login.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% csrf_token %}
用戶名: <input type="text" id="username">
密碼: <input type="password" id="password">
<button id="sub">登陸</button>
<span id="mag" style="color: red;font-size: 12px;"></span>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script>
$("#sub").click(function () {
var uname = $("#username").val();
var pwd = $("#password").val();
var csrf_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, typeof response);
if (response.status){
$("span").text("登陸成功");
}else{
$("span").text("失敗");
}
}
}
)
})
</script>
</body>
</html>2.使用HttpResponse來向前端發送消息
HttpResponse加一個頭就可以了,這樣使用HttpResponse(data, content_type=content_type=‘application/json‘)
這樣在前端html頁面就不用解析json格式了,可以直接作為對象調用數據
views.py
from django.shortcuts import render,redirect,HttpResponse
from django.http import JsonResponse
from app01 import models
import json
# Create your views here.
def login(request):
if request.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}
if ret:
a["status"] = True
print(a)
msg = json.dumps(a)
return HttpResponse(msg, content_type='application/json')
else:
msg = json.dumps(a)
return HttpResponse(msg, content_type='application/json')
else:
return render(request,"login.html")login.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% csrf_token %}
用戶名: <input type="text" id="username">
密碼: <input type="password" id="password">
<button id="sub">登陸</button>
<span id="mag" style="color: red;font-size: 12px;"></span>
<script src="{% static 'js/jquery.min.js' %}"></script> # 通過別名引入靜態文件
<script>
$("#sub").click(function () {
var uname = $("#username").val();
var pwd = $("#password").val();
var csrf_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, typeof response);
if (response.status){
$("span").text("登陸成功");
}else{
$("span").text("失敗");
}
}
}
)
})
</script>
</body>
</html>3.引入json模塊,發送json格式的消息
向前端發送的是json格式的消息,所以在前端要用JSON.parse()來反序列化字符串為JSON對象之後才能使用
views.py
from django.shortcuts import render,redirect,HttpResponse
from app01 import models
import json
# Create your views here.
def login(request):
if request.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}
if ret:
a["status"] = True
print(a) # {'status': True}
msg = json.dumps(a)
return HttpResponse(msg)
else:
return HttpResponse(a)
else:
return render(request,"login.html")login.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{% csrf_token %}
用戶名: <input type="text" id="username">
密碼: <input type="password" id="password">
<button id="sub">登陸</button>
<span id="mag" style="color: red;font-size: 12px;"></span>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script>
$("#sub").click(function () {
var uname = $("#username").val();
var pwd = $("#password").val();
var csrf_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, typeof response);
msg = JSON.parse(response);
if (msg.status){
$("span").text("登陸成功");
}else{
$("span").text("失敗");
}
}
}
)
})
</script>
</body>
</html>實現結果:
django系列6--Ajax01 特點, 基本格式, 向前端發送數據